<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="my_navbar"> <div class="container-fluid"> <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="#">My Resume</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">INTRODUCTION</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT ME<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">EDUCATION</a></li> <li><a href="#">WORK</a></li> </ul> </li> <li><a href="#">GOAL</a></li> <li><a href="#">CONTACTS</a></li> </ul> </div> </div> </nav>

@import url('https://fonts.googleapis.com/css?family=Roboto|Sacramento'); body{font-family:'Roboto','sans-serif';} .my_navbar{ background-color:#a8d36d; border-bottom:4px solid #2e3d41; width:100%; height: auto; padding: 0 10px; position: fixed; margin: 0px; z-index: 1; opacity: 0.9; } .my_navbar .navbar-nav > li > a { font-size: 16px; color: white; padding: 15px 20px; } .my_navbar .navbar-nav > li > a.active { font-size: 16px; color: white; background-color:#2e3d41; } .my_navbar .navbar-nav > li > a:hover { font-size: 16px; color: white; padding: 15px 20px; background-color:#2e3d41; } .my_navbar .navbar-nav>li>.dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; background-color:#2e3d41; } .dropdown-menu>li>a { display: block; padding: 10px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #fff; white-space: nowrap; } .navbar-header > a { font-family: 'Sacramento', cursive; margin: 0px; text-decoration: none; color:#2e3d41; font-size: 35px; font-weight:bolder; padding: 15px 30px; } .my_navbar .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: #2e3d41; background-image: none; border: 1px solid #2e3d41; border-radius: 4px; } .my_navbar .navbar-toggle .icon-bar { color: #a8d36d; display: block; width: 22px; height: 2px; border-radius: 1px; }

$(document).ready(function() { $("#myNavbar li a").click(function () { $("#myNavbar li a").removeClass("active"); // $(".tab").addClass("active"); // instead of this do the below $(this).addClass("active"); }); });