<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 rel=’stylesheet’ id=’lbmn-google-fonts-css’ href=’//fonts.googleapis.com/css?family=Roboto%3A100%2C300%2C400%2C500%2C700%2C900%7C%7C%7C&subset=latin&ver=4.6.6′ type=’text/css’ media=’all’ />
<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="#">
<img src="http://vivekbisht.com/img/logo.png">
</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;
font-family: “Roboto”,Helvetica,Arial,”DejaVu Sans”,”Liberation Sans”,Freesans,sans-serif;
}
.navbar .navbar-default {
border: 0;
border-radius: 0;
margin-bottom: 0;
background:#fff;
}
.navbar .navbar-default .navbar-toggle {
margin-top: 32px;
}
.navbar .navbar-brand {
width:150px;
height: auto;
padding: 22px 15px 15px;
}
.navbar-brand img{
width:100%;
}
/*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;
}
.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-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;
}
}
