Wip elementary os navbar
How do I make an wip elementary os navbar?
What is a wip elementary os navbar? How do you make a wip elementary os navbar? This script and codes were developed by Nick Colley on 12 November 2022, Saturday.
Wip elementary os navbar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>wip elementary os navbar </title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-image: url('http://elementaryos.org/img/bg-uniform.png'); font-family: 'Open Sans', sans-serif;
}
header { height: 148px; padding: 52px 20px; background-image: url('http://elementaryos.org/img/nav-bg.png'); background-repeat: no-repeat;
}
.navbar { overflow: hidden; border-radius: 5px; border-color: #C6C6C6; box-shadow: 0 1px 3px rgba(0,0,0,.1); background: #f8f8f8; background: linear-gradient(#FFF, #F2F2F2 44px);
}
.navbar-brand { margin: 6px 15px 0; height: 44px; width: 32px; background-image: url('http://elementaryos.org/img/navsprite.png'); background-repeat: no-repeat; background-position: 0 -107px; text-indent: -9999999px;
}
.navbar-brand:hover { background-position: 0 -260px;
}
.navbar-nav > li { text-shadow: #FFF 0 1px 0; border-left: 1px solid #DDD;
}
.navbar-nav > .active > a { background: #F2F2F2 !important;
}
.form-control { margin-top: 2px; height: 30px;
}
.btn-group { border-left: 1px solid #DDD; padding-left: 10px; margin-left: 10px;
}
.btn { margin-top: 2px; height: 30px; font-size: .9em; line-height: 1.1; background: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Home</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Journal</a></li> <li><a href="#">Support</a></li> <li><a href="#">Developer</a></li> <li><a href="#">Store</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <div class="btn-group"> <button type="button" class="btn btn-default">Register</button> <button type="button" class="btn btn-default">Login</button> </div> </form> </div><!-- /.navbar-collapse --> </nav>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
</body>
</html>
Wip elementary os navbar - Script Codes CSS Codes
body { background-image: url('http://elementaryos.org/img/bg-uniform.png'); font-family: 'Open Sans', sans-serif;
}
header { height: 148px; padding: 52px 20px; background-image: url('http://elementaryos.org/img/nav-bg.png'); background-repeat: no-repeat;
}
.navbar { overflow: hidden; border-radius: 5px; border-color: #C6C6C6; box-shadow: 0 1px 3px rgba(0,0,0,.1); background: #f8f8f8; background: linear-gradient(#FFF, #F2F2F2 44px);
}
.navbar-brand { margin: 6px 15px 0; height: 44px; width: 32px; background-image: url('http://elementaryos.org/img/navsprite.png'); background-repeat: no-repeat; background-position: 0 -107px; text-indent: -9999999px;
}
.navbar-brand:hover { background-position: 0 -260px;
}
.navbar-nav > li { text-shadow: #FFF 0 1px 0; border-left: 1px solid #DDD;
}
.navbar-nav > .active > a { background: #F2F2F2 !important;
}
.form-control { margin-top: 2px; height: 30px;
}
.btn-group { border-left: 1px solid #DDD; padding-left: 10px; margin-left: 10px;
}
.btn { margin-top: 2px; height: 30px; font-size: .9em; line-height: 1.1; background: none;
}
Developer | Nick Colley |
Username | nickcolley |
Uploaded | November 12, 2022 |
Rating | 3 |
Size | 2,993 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Erno | 5,311 Kb |
Custom Soundcloud Player | 3,033 Kb |
Centered Text in a Perfect Circle | 2,410 Kb |
Close animation | 2,207 Kb |
Raincoat PC | 3,164 Kb |
Music | 4,521 Kb |
Henry Homesweet Boxmodel | 3,747 Kb |
One element icon | 1,976 Kb |
Diagonal Nav bar | 2,392 Kb |
Subtle Quote | 3,379 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Css3 loader | Clknap | 2,391 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!