Wip elementary os navbar

Developer
Nick Colley
Size
2,993 Kb
Views
30,345

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 Previews
IQ Test

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;
}
Wip elementary os navbar - Script Codes
Wip elementary os navbar - Script Codes
Home Page Home
Developer Nick Colley
Username nickcolley
Uploaded November 12, 2022
Rating 3
Size 2,993 Kb
Views 30,345
Do you need developer help for Wip elementary os navbar?

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!

Nick Colley (nickcolley) Script Codes
Name
Henry Homesweet Boxmodel
Custom Soundcloud Player
A Pen by Nick Colley
Flickering TV
Erno
Banner hover test
Close animation
Music
One element icon
Centered Text in a Perfect Circle
Create amazing SEO content with AI!

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!