"nav"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <!-- Navigation Bar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#header">Hogwarts</a> </div> <h2 class="brand brand-name navbar-center"><img class="img-responsive center-block" src="http://vignette4.wikia.nocookie.net/harrypotter/images/a/ae/Hogwartscrest.png/revision/latest?cb=20110806202805"></h2> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li class="page-scroll"><a href="#about-me">About</a></li> <li class="page-scroll"><a href="#portfolio">Houses</a></li> <li><a href="#footer">Professors</a></li> </ul> </div> </div> </div> </div> </div> </nav> <!-- End of Nav Bar --> </body>
@font-face { font-family: hpFont; src: url(http://www.urbanfonts.com/fonts/Harry_P.htm); } .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{ color: #ffffff; } .navbar { font-family: hpFont; font-size: 18px; background-color: #191919; font-weight: 300; padding: 10px; } .navbar-brand { font-size: 18px; font-weight: 300; letter-spacing: 1px; } .navbar.navbar-default.navbar-fixed-top a { color: white; } /*End of Nav Bar Styling */ .img-responsive { width: 225px; padding: 0px 0px 0px 0px; margin-bottom: -85px; margin-top: -15px; }

Related: See More

Now UI Kit

Questions / Comments: