I want to create menu which is floating menas whn i scroll down it should go down with it and responsive too..
i have created slider below it but it is not working..
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="logo"><a href="index.html"><img src="images/logo/logo.png" alt=""></a></div>
</div>
<div class="col-md-10 col-sm-9 col-xs-6">
<div class="mgea-full-width">
<div class="header-right">
<div class="header-menu hidden-sm hidden-xs">
<div class="menu">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">about</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Food Menu</a></li>
<li><a href="#">gallery</a></li>
<li><a href="contact-us.html">contact</a></li>
</ul>
</div>
</div>
<div class="search">
<div class="search-inner">
<a href="#"><i class="mdi mdi-magnify"></i></a>
</div>
</div>
</div>
<div class="search-inside" style="display: none;">
<a href="#" class="search-close"><i class="mdi mdi-close"></i></a>
<div class="search-overlay"></div>
<div class="searchbar-inner">
<div class="search">
<form action="#">
<input type="search" placeholder="Search here"><button type="submit"><i class="mdi mdi-magnify"></i></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu start -->
<div class="mobile-menu-area hidden-lg hidden-md">
<div class="container">
<div class="col-md-12">
<nav id="dropdown" style="display: block;">
<ul>
<li><a href="#">Home</a>
<ul class="dropdown_menu">
<li><a href="index.html">home page one</a></li>
<li><a href="index-2.html">home page two</a></li>
<li><a href="index-3.html">home page three</a></li>
<li><a href="index-4.html">home page four</a></li>
<li><a href="index-box.html">home page five</a></li>
<li><a href="index-box-fixed.html">home page six</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li class="mega-parent"><a href="#">Elements</a>
<ul class="mgea-menu">
<li class="mega-sub"><a href="#">Column one</a>
<ul class="mega-sub-item">
<li><a href="#">Accordion</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">table</a></li>
<li><a href="#">progressbar</a></li>
<li><a href="#">Alerts</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column two</a>
<ul class="mega-sub-item">
<li><a href="#">Audio</a></li>
<li><a href="#">vido</a></li>
<li><a href="#">gallery one</a></li>
<li><a href="#">Gallery two</a></li>
<li><a href="#">typhogrpahy</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column Three</a>
<ul class="mega-sub-item">
<li><a href="#">Testimonial</a></li>
<li><a href="#">brand</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">map</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column one</a>
<ul class="mega-sub-item">
<li><a href="#">Food menu item 1</a></li>
<li><a href="#">Food menu item 2</a></li>
<li><a href="#">Contact form</a></li>
<li><a href="#">Food product</a></li>
<li><a href="#">No sticky</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">gallery</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Mobile menu end -->
</div>
