<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 ----------> <nav id="main-menu" class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="banner"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="#">LOGO</a> </div> <div class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li class="scroll active"><a href="#">Home</a></li> <li class="scroll"><a href="#">About Us </a></li> <!-- <li class="scroll"><a href="services.html"></a></li> --> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-4"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Carousel Control</a></li> <li><a href="#">Right Navigation</a></li> <li><a href="#">Four Columns Grid</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="dropdown-header">Plus</li> <li><a href="#">Navbar Inverse</a></li> <li><a href="#">Right Elements</a></li> <li><a href="#">Coloured Headers</a></li> <li><a href="#">Primary Buttons</a></li> </ul> </li> <li class="col-sm-4"> <ul> <li class="dropdown-header">Much more</li> <li><a href="#">Easy to Customize</a></li> <li><a href="#">Calls to action</a></li> <li><a href="#">Custom Fonts</a></li> <li><a href="#">Slide down</a></li> </ul> </li> </ul> </li> <li class="scroll"><a href="#"> News </a></li> <li class="scroll"><a href="#">Contact</a></li> </ul> </div> </div><!--/.container--> </nav><!--/nav-->

body{ background:#b3e5fc; } .navbar .navbar-default { border: 0; border-radius: 0; margin-bottom: 0; background:#fff; } .navbar .navbar-default .navbar-toggle { margin-top: 32px; } .navbar .navbar-default .navbar-brand { height: auto; padding: 22px 15px 15px; } /*Mega Menu Css*/ .mega-dropdown { position: static !important; } .mega-dropdown-menu { padding: 0; width: 50%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } @media screen and (max-width: 970px){ .mega-dropdown-menu { padding: 0; width: 70%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 10px 5px; border-top: 1px solid #ca7167; color: #4a4a4a; /*font-family: RadikalW01_Black_bold;*/ /*text-transform: uppercase;*/ } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; } .mega-dropdown-menu .dropdown-header { font-size: 18px; color: #b80303; padding: 0; line-height: 30px; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{ color: #f45541; background-color: rgba(231, 231, 231, 0); } /*End Mega Menu Css*/ @media only screen and (min-width: 768px) { #main-menu.navbar-default { background: #eee; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; } #main-menu.navbar-default .navbar-nav > li > a { padding-top: 5px; padding-bottom: 5px; border-radius: 20px; margin:27px 0; font-size:16px; font-family: 'Roboto-regular'; font-weight:normal; } #main-menu.navbar-default .navbar-nav > li.active > a, #main-menu.navbar-default .navbar-nav > li.open > a, #main-menu.navbar-default .navbar-nav > li:hover > a { background: transparent; border-top: 0 solid #b80303; color:#4c4c4c; } #main-menu.navbar-default .dropdown-menu { padding: 0 5px; min-width: 220px; margin-right: 10px; background-color: rgba(234, 235, 241, 0.9); border: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #main-menu.navbar-default .dropdown-menu > li { /*border-left: 3px solid transparent;*/ /*margin-left: -20px;*/ padding-left: 17px; -webit-transition: border-color 400ms; transition: border-color 400ms; } #main-menu.navbar-default .dropdown-menu > li > a { border-top: 1px solid #404455; padding: 15px 0; color: #eeeeee; } #main-menu.navbar-default .dropdown-menu > li:first-child > a { border-top: 0; } #main-menu.navbar-default .dropdown-menu > li.active, #main-menu.navbar-default .dropdown-menu > li.open, #main-menu.navbar-default .dropdown-menu > li:hover { border-left-color: #b80303; } #main-menu.navbar-default .dropdown-menu > li.active > a, #main-menu.navbar-default .dropdown-menu > li.open > a, #main-menu.navbar-default .dropdown-menu > li:hover > a { color: #b80303; background-color: transparent; } }