<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 ----------> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header page-scroll"> <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 page-scroll" href="#page-top"><img src="https://dummyimage.com/148x70/000/fff&text=Logo" class="img-responsive" alt=""></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-right navbar-nav"> <!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="hidden active"> <a class="page-scroll" href="#page-top"></a> </li> <li> <a class="page-scroll" href="#about">About</a> </li> <li> <a class="page-scroll" href="#services">Services</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav>

.navbar-brand { height: auto; transition: all 0.5s ease 0s; } .navbar-collapse ul.navbar-nav { margin: 25px 0; transition: all 0.5s ease 0s; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .top-nav-collapse { background: #3f51b5 none repeat scroll 0 0; } .navbar-default { background: #3f51b5 ; } .top-nav-collapse .navbar-brand { max-width: 110px; } .top-nav-collapse ul.navbar-nav { margin: 9px 0; }