<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 ----------> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous">

.navbar-inverse {background-color: #337ab7;border-color:#337ab7;border-radius: 0px;height:50px;width:100%;position: fixed;} .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #fff;background-color: #0e364c;} .navbar-inverse .navbar-nav>li>a {color:#ffffff;font-family: 'Open Sans', sans-serif;} .navbar-inverse .navbar-brand { color:#ffffff;} .menu { display:none;}

$(document).ready(function(e) { $('#menu_icon').click(function(){ if($("#content_details").hasClass('drop_menu')) { $("#content_details").addClass('drop_menu1').removeClass('drop_menu'); } else{ $("#content_details").addClass('drop_menu').removeClass('drop_menu1'); } }); });