<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="col-md-6 col-md-offset-2"> <nav class="navbar navbar-default navbar-inverse"> <div class="container"> <div class="row"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div> </div> </nav> </div>

.navbar-default{ margin-top:50px; /* you don't need add this line */ border-radius: 0px; } .navbar-inverse .navbar-nav > li > a { color: #9d9d9d; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #fff; background-color: transparent; border-bottom: 3px solid #f62329; background: url("http://s31.postimg.org/9k42omozb/arrow.png") bottom; background-repeat: no-repeat; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background-color: #080808; border-bottom: 3px solid #f62329; background: url("http://s31.postimg.org/9k42omozb/arrow.png") bottom; background-repeat: no-repeat; }