<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-inverse nav_custom"> <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="#">Company Name</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <form class="navbar-form navbar-left" > <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li class="dropdown bigmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu subbignav row"> <li class="col-md-4"> <ul> <li class="nav-header"><h5>Sub Cateogry</h5></li> <li class="divider"></li> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="col-md-4"> <ul> <li class="nav-header"><h5>Sub Cateogry</h5></li> <li class="divider"></li> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="col-md-4"> <ul> <li class="nav-header"><h5>Sub Cateogry</h5></li> <li class="divider"></li> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> </ul> </li> <li class="dropdown bigmenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 2 <span class="caret"> </span> </a> <ul class="dropdown-menu subbignav row"> <li class="col-md-4"> <ul> <li class="nav-header"><h5>Sub Cateogry</h5></li> <li class="divider"></li> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="col-md-4"> <ul> <li class="nav-header"><h5>Sub Cateogry</h5></li> <li class="divider"></li> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li class="col-md-4"> <ul> <li class="nav-header"><h5>Sub Cateogry</h5></li> <li class="divider"></li> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> </ul> </li> <li><a href="#">Page 3</a></li> <li><a href="#" class="btn btn-info btnlogin btnsm"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> <li><a href="#" class="btn btn-primary btnreg btnsm"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> </ul> </div> </div> </nav>

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700&display=swap'); body{ font-family: 'Josefin Sans', sans-serif; } .nav_custom .form-control { height: 35px; } nav.navbar.navbar-inverse.nav_custom { border-radius: 0px; background: #FF9800; border: none; box-shadow: -4px 1px 11px #ccc; padding: 10px 0px; } .nav_custom .navbar-nav li a { font-size: 16px; text-transform: uppercase; } .nav_custom .navbar-nav li.active a { background: #3F51B5; border-radius: 5px; } .nav_custom .navbar-nav li a { color: #fff; font-weight: 600; border-radius: 5px; margin: 0px 5px; padding: 10px 15px; } .nav_custom a.navbar-brand { color: #fff; font-size: 22px; } .navbar-inverse.nav_custom .navbar-nav>.open>a, .navbar-inverse.nav_custom .navbar-nav>.open>a:focus, .navbar-inverse.nav_custom .navbar-nav>.open>a:hover{ background-color: #3f51b5; } .navbar-inverse.nav_custom .navbar-nav>.active>a, .navbar-inverse.nav_custom .navbar-nav>.active>a:focus, .navbar-inverse.nav_custom .navbar-nav>.active>a:hover{background-color: #3f51b5;} .nav_custom ul.dropdown-menu { padding: 0px; border-color: #f1f1f1; box-shadow: 0px 2px 6px #e8e8e882; left: auto; right: auto; top: auto; margin-top: 10px; border-radius: 5px; } .nav_custom ul.dropdown-menu li a{color: #474747} .nav_custom ul.dropdown-menu li a { padding: 5px 5px; } .nav_custom ul.dropdown-menu li { margin: 5px 0px; } .btnsm { padding: 7px 10px !important; } /* dropdown */ .bigmenu { position: static !important; } ul.dropdown-menu.subbignav ul { margin: 0; padding: 0; list-style: none; } .nav_custom .navbar-nav { margin-top: 5px; }

$(document).ready(function() { function headHover() { if($(document).width() > 991) { $(".dropdown").hover(function() { $(this).children(".dropdown-menu").fadeIn("fast"); }, function() { $(this).children(".dropdown-menu").fadeOut("fast"); }); } else { $(".dropdown").unbind('hover'); } } headHover(); $(document).resize(function() { headHover(); }); });