<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 class="mt-3 mb-4">WordPress CSS3 Responsive Mega Menu</h2> </center> <div class="row"> <div class="col-xl-12"> <div class="menubar"> <nav id="mobile-menu" class="menu-header-menu-container" style="display: block;"> <ul id="menu-header-menu" class="menu"> <li id="menu-item-281" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-281"><a href="http://localhost/wp-gixco/">Home</a></li> <li id="menu-item-264" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-264"> <a href="#">Products</a> <ul class="sub-menu"> <li id="menu-item-1809" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-1809"> <a href="http://localhost/wp-gixco/product-category/furniture/">Furniture</a> <ul class="sub-menu"> <li id="menu-item-1811" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1811"><a href="http://localhost/wp-gixco/product-category/furniture/lounge-chairs/">Lounge Chairs</a></li> <li id="menu-item-1810" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1810"><a href="http://localhost/wp-gixco/product-category/furniture/chaise-beds/">Chaise beds</a></li> <li id="menu-item-1812" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1812"><a href="http://localhost/wp-gixco/product-category/furniture/small-storage/">Small Storage</a></li> <li id="menu-item-1813" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1813"><a href="http://localhost/wp-gixco/product-category/furniture/sofa-armchairs/">Sofa armchairs</a></li> </ul> </li> <li id="menu-item-1687" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-1687"> <a href="http://localhost/wp-gixco/product-category/clothing/">Clothing</a> <ul class="sub-menu"> <li id="menu-item-1688" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1688"><a href="http://localhost/wp-gixco/product-category/clothing/formal-shirt/">Formal Shirt</a></li> <li id="menu-item-1708" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1708"><a href="http://localhost/wp-gixco/product-category/clothing/casual-shirt/">Casual Shirt</a></li> <li id="menu-item-1689" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1689"><a href="http://localhost/wp-gixco/product-category/clothing/jeans-pant/">Jeans Pant</a></li> <li id="menu-item-1709" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1709"><a href="http://localhost/wp-gixco/product-category/clothing/formal-pant/">Formal Pant</a></li> </ul> </li> <li id="menu-item-1682" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-1682"> <a href="http://localhost/wp-gixco/product-category/accessories/">Accessories</a> <ul class="sub-menu"> <li id="menu-item-1683" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1683"><a href="http://localhost/wp-gixco/product-category/accessories/footwear/">Footwear</a></li> <li id="menu-item-1684" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1684"><a href="http://localhost/wp-gixco/product-category/accessories/hand-bag/">Hand Bag</a></li> <li id="menu-item-1820" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1820"><a href="http://localhost/wp-gixco/product-category/accessories/magazine/">Magazine</a></li> <li id="menu-item-1821" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1821"><a href="http://localhost/wp-gixco/product-category/accessories/wall-mirror/">Wall Mirror</a></li> </ul> </li> </ul> </li> <li id="menu-item-1697" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1697"><a href="http://localhost/wp-gixco/product-category/featured/">Featured</a></li> <li id="menu-item-1707" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1707"><a href="http://localhost/wp-gixco/about/">About</a></li> <li id="menu-item-1698" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1698"><a href="http://localhost/wp-gixco/contact/">Contact</a></li> <li id="menu-item-1700" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1700"><a href="http://localhost/wp-gixco/blog/">Blog</a></li> </ul> </nav> </div> </div> <div class="col-12 d-xl-none"> <div class="mobile-menu"></div> </div> </div> </div>

/* menubar */ .menubar { text-align: center; } .menubar nav ul { margin: 0; padding: 0; list-style: none; } .menubar nav ul li { display: inline-block; margin: 0 22px 0 0; position: relative; } .menubar nav ul li:last-child { margin-right: 0; } .menubar nav ul li a { display: block; padding: 0 0 25px; font-size: 13px; font-family: "Poppins", sans-serif; font-weight: 500; letter-spacing: 0.5px; color: #000000; text-transform: uppercase; text-decoration: none; transition: 0.3s; text-align: left; } .menubar nav ul li:hover>a { text-decoration: none; color: #dd7e2e; } .menubar nav ul li ul { display: block; position: absolute; min-width: 230px; top: 100%; left: 0; transition: 0.3s; box-shadow: 0px 5px 8px rgba(106, 106, 106, 0.4); border: 1px solid #ebebeb; visibility: hidden; opacity: 0; background: #ffffff; } .menubar nav ul li ul li { margin: 0; padding: 0px; display: block; } .menubar nav ul li ul li>a { text-transform: uppercase; font-size: 12px; padding: 12px 20px; font-weight: 500; margin-bottom: 0px; } .menubar nav ul li ul li:hover>a { color: #dd7e2e; } .menubar nav ul li:hover ul { visibility: visible; opacity: 1; z-index: 11; } .menubar nav ul li ul { display: block; position: absolute; min-width: 800px; top: 100%; left: 0; transition: 0.3s; box-shadow: 0px 5px 8px rgba(106, 106, 106, 0.4); border: 1px solid #ebebeb; padding: 25px 0px 0; visibility: hidden; opacity: 0; background: #ffffff; } .menubar nav ul li ul li { width: 33.33%; float: left; display: block; margin: 0; padding: 0px 25px 25px; } .menubar nav ul li ul li>a { text-transform: uppercase; font-size: 12px; padding: 0; font-weight: 500; margin-bottom: 15px; } .menubar nav ul li ul li:hover>a { color: #000; } .menubar nav ul li ul li>ul { min-width: auto; position: relative; box-shadow: none; padding: 0; border: none; } .menubar nav ul li ul li>ul li { width: auto; float: none; padding: 10px 0; border-bottom: 1px solid #e9e9e9; } .menubar nav ul li ul li>ul li>a { text-transform: none; font-weight: 300; font-size: 13px; margin: 0; } .menubar nav ul li ul li>ul li a:hover { color: #dd7e2e; } .menubar nav ul li ul li>ul li:last-child { border-bottom: none; } .menubar nav ul li:hover { visibility: visible; opacity: 1; z-index: 11; }

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