<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!-- ======================= Personalise by changing the CSS ==================== --> <!-- Standard Bootstrap navbar ive set it as a static but you can set it to any bootstrap navbar type --> <nav class="cf-nav navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">CYBERFOX.</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>

/* Created by Cyberfox any questions feel free to comment. */ @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'); /* Global Settings */ html, body{ min-height: 100%; } /* Navbar Settings */ .cf-nav{ background: #F9F9F9; /* to change the color */ border: 0px; border-radius: 0px; min-height:100px; /* to change the height */ box-shadow: 0 2px 9px -6px #999; } /* Brand Settings */ .cf-nav .navbar-brand{ color: #000000; font-family: 'Source Sans Pro', sans-serif; font-weight: 700; letter-spacing: 5px; line-height: 3.5; } /* Link Settings */ .cf-nav .navbar-nav li a{ line-height: 5.5; font-family: 'Source Sans Pro', sans-serif; color: #333333; font-size: 13px; font-weight: 600; text-decoration: none; text-transform: uppercase; } .cf-nav .navbar-nav li a:hover{ color:#333333; } .cf-nav .navbar-nav li a:before{ content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .cf-nav .navbar-nav li a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .cf-nav .navbar-toggle { line-height: 5.5; font-family: 'Source Sans Pro', sans-serif; color: #333333; font-size: 13px; font-weight: 600; margin-top: 32px; }