<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link href="//www.meanthemes.com/demo/meanmenu/meanmenu.css" rel="stylesheet" id="bootstrap-css"> <script src="//www.meanthemes.com/demo/meanmenu/jquery.meanmenu.js"></script> <div class="container"> <center><h2>Responsvie mega menu</h2></center> <div class="row"> <div class="col-sm-12 px-0"> <div class="menubar"> <nav id="mobile-menu"> <ul> <li><a href="index.html">Home</a></li> <li> <a href="#">Products</a> <ul class="mega-menu"> <li> <a href="#">Furniture Category</a> <ul> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> </ul> </li> <li> <a href="#">Furniture Category</a> <ul> <li><a href="#">Decorative accessories</a></li> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Small Storage</a></li> </ul> </li> <li> <a href="#">Furniture Category</a> <ul> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Small Storage</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> <li><a href="#">Kichen & dining</a></li> </ul> </li> <li> <a href="#">Furniture Category</a> <ul> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> </ul> </li> </ul> </li> <li> <a href="#">Pages</a> <ul class="mega-menu"> <li> <a href="#">Home Styles</a> <ul> <li><a href="#">Home style 01</a></li> <li><a href="#">Home style 02</a></li> <li><a href="#">Home style 03</a></li> <li><a href="#">Home style 04</a></li> </ul> </li> <li> <a href="#">Shop Pages</a> <ul> <li><a href="#">Shop Grid</a></li> <li><a href="#">Shop List</a></li> <li><a href="#">Shop Detail</a></li> <li><a href="#">Shopping cart</a></li> </ul> </li> <li> <a href="#">Other Pages</a> <ul> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> <li><a href="#">Wishlist</a></li> <li><a href="#">Checkout</a></li> </ul> </li> <li> <a href="#">Blog Pages</a> <ul> <li><a href="#">2 Colums Blog</a></li> <li><a href="#">Blog Details</a></li> </ul> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav> </div> </div> <div class="col-12 d-xl-none"> <div class="mobile-menu"></div> </div> </div> </div>

/* Nav Menu */ .menubar { margin: 10px 0; } .menubar nav ul { margin: 0; padding: 0; list-style: none; } .menubar nav ul li { display: inline-block; margin: 0 20px 0 0; } .menubar nav ul li a { display: block; font-size: 12px; font-family: "Poppins", sans-serif; font-weight: 500; padding: 25px 0; letter-spacing: 0.5px; color: #000000; text-transform: uppercase; text-decoration: none; transition: 0.3s; } .menubar nav ul li:hover > a { text-decoration: none; color: #dd7e2e; } .menubar nav ul li ul.mega-menu { width: 100%; display: block; position: absolute; background:#ffffff; top: 100%; left: 0; transition: 0.3s; box-shadow: 0px 5px 8px rgba(106, 106, 106, 0.4); border: 1px solid #ebebeb; padding: 24px 30px; visibility: hidden; opacity: 0; } .menubar nav ul li ul.mega-menu li { width: 25%; float: left; display: block; margin: 0; padding: 6px 0px; } .menubar nav ul li ul.mega-menu li > a { text-transform: uppercase; font-size: 12px; padding: 0; font-weight: 500; margin-bottom: 20px; } .menubar nav ul li ul.mega-menu li:hover > a { color: #222222; } .menubar nav ul li ul.mega-menu li > ul { display: block; } .menubar nav ul li ul.mega-menu li > ul li { width: auto; float: none; } .menubar nav ul li ul.mega-menu li > ul li > a { text-transform: none; font-weight: 300; font-size: 13px; margin: 0; } .menubar nav ul li ul.mega-menu li > ul li a:hover { color: #dd7e2e; } .menubar nav ul li:hover .mega-menu { visibility: visible; opacity: 1; z-index: 99; }

$('#mobile-menu').meanmenu({ meanMenuContainer: '.mobile-menu', meanScreenWidth: "991" });