<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 ----------> <div class="container"> <div class="row"> <!-- end nav bar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><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="index.html"><img src="images/sovicalogo.png" id="logo" /></a></div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="topFixedNavbar1"> <ul class="nav navbar-nav links"> <li class="active"><a href="index.html">Home<span class="sr-only">(current)</span></a></li> <li><a href="#">Blog</a></li> <li><a href="#">Services</a></li> <li><a href="#">Tutorials</a></li> </ul> <ul class="nav navbar-nav navbar-right nav-pills"> <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li> <li> <a href="#"><button type="button" class="btn btn-info" id="login">Log In</button></a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!-- end nav bar --> </div> </div>

@charset "utf-8"; #logo { width: 82px; position: absolute; margin-top: -27px; margin-left: -14px; } .links { margin-left: 53px; } .navbar.navbar-default.navbar-fixed-top { margin-top: 11px; } /* navigation stile */ .navbar-default { background-color: #002d3f; border-color: #6ac6ff; } .navbar-default .navbar-brand { color: #6ac6ff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffffff; } .navbar-default .navbar-text { color: #6ac6ff; } .navbar-default .navbar-nav > li > a { color: #6ac6ff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav > li > .dropdown-menu { background-color: #002d3f; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a { color: #6ac6ff; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus { color: #ffffff; background-color: #6ac6ff; } .navbar-default .navbar-nav > li > .dropdown-menu > li > .divider { background-color: #6ac6ff; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #6ac6ff; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #6ac6ff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffffff; background-color: #6ac6ff; } .navbar-default .navbar-toggle { border-color: #6ac6ff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #6ac6ff; } .navbar-default .navbar-toggle .icon-bar { background-color: #6ac6ff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #6ac6ff; } .navbar-default .navbar-link { color: #6ac6ff; } .navbar-default .navbar-link:hover { color: #ffffff; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #6ac6ff; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #6ac6ff; } .nav.navbar-nav.links { margin-left: -11px; text-align: center; } .nav.navbar-nav.navbar-right { text-align: center; } } /* end navbar stile */ #login { margin-top: -13px; margin-bottom: -11px; }