{"product_id":"how-to-create-multilevel-mega-menu-in-bigcommerce","title":"How to create multilevel mega menu in BigCommerce","description":"You might already know how important mega menu is for your online store, as it give shopper broader view of your categories. Not to mention, this is being adopted by popular shopping websites such as Amazon, Ebay and many more. You can do this yourself if you have some knowledge about \u003cspan data-sheets-value=\"[null,2,\" bigcommerce web design data-sheets-userformat=\"[null,null,27587,[null,0],[null,2,16777215],null,null,null,null,0,2,4,0,null,[null,2,0],null,11,1]\"\u003e\u003ca href=\"http:\/\/localhost\/dit\/services\/bigcommerce-design-development\"\u003ebigcommerce web design\u003c\/a\u003e. \u003c\/span\u003e When you have huge amount of categories and their sub-categories to offer, it might be best to add multi levels in your mega menu, so your shoppers can drill down any sub categories with ease of use and reach to what they are looking for. You can either have any \u003ca href=\"http:\/\/localhost\/dit\/services\/bigcommerce-design-development\"\u003eBigCommerce development services\u003c\/a\u003e like us to do it for you, or follow these simple steps to do it yourself.\n\nTo create Multilevel Mega menu in your Bigcommerce template yourself follow these steps.\n\nBefore going ahead with these changes, download the theme backup first, obviously just to be safe. To do this go to your admin panel, go to design and click on download theme.\n\u003ch3\u003e1. Add Categories\u003c\/h3\u003e\nLogin to your admin section and add categories like this, so when the multilevel mega menu is implemented you will see the items in it. If your BigCommerce store already has categories and subcategories like this, you can ignore this.\n\n\u003cimg class=\"size-full wp-image-664 alignnone\" src=\"http:\/\/localhost\/dit\/wp-content\/uploads\/2016\/06\/category-admin.jpg\" alt=\"\"\u003e\n\u003ch3\u003e2. Add JavaScript\u003c\/h3\u003e\nAdd this below javascript in your HtmlHead.html You will find this file under your BigCommerce admin section in Design \u0026gt; Edit Html.\n\n[php]\u0026amp;amp;amp;lt;script type=\u0026amp;amp;amp;quot;text\/javascript\u0026amp;amp;amp;quot;\u0026amp;amp;amp;gt;\n$( document ).ready(function() { $('.SideCategoryListFlyout ul.sf-menu \u0026amp;amp;amp;amp;gt; li').each(function (i, li) {\n \n$( \u0026amp;amp;amp;quot;ul.sf-menu \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li\u0026amp;amp;amp;quot; ).addClass( \u0026amp;amp;amp;quot;level1\u0026amp;amp;amp;quot; );\n$( \u0026amp;amp;amp;quot;ul.sf-menu \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li\u0026amp;amp;amp;quot; ).addClass( \u0026amp;amp;amp;quot;level2\u0026amp;amp;amp;quot; );\n$( \u0026amp;amp;amp;quot;ul.sf-menu \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li\u0026amp;amp;amp;quot; ).addClass( \u0026amp;amp;amp;quot;level3\u0026amp;amp;amp;quot; );\n$( \u0026amp;amp;amp;quot;ul.sf-menu \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li \u0026amp;amp;amp;amp;gt; ul \u0026amp;amp;amp;amp;gt; li\u0026amp;amp;amp;quot; ).addClass( \u0026amp;amp;amp;quot;level4\u0026amp;amp;amp;quot; );\n \nvar lis = $(li).find('li.level1');\n \nfor (var i = 0; i \u0026amp;amp;amp;amp;lt; lis.length; i += 9) {\nlis.slice(i, i + 9).wrapAll(\u0026amp;amp;amp;quot;\n \n\u0026amp;amp;amp;amp;lt;div class='li_group'\u0026amp;amp;amp;amp;gt;\u0026amp;amp;amp;amp;lt;\/div\u0026amp;amp;amp;amp;gt;\n\u0026amp;amp;amp;quot;);\n}\nvar $product = $(li);\nif ($product.find('ul li.level1').length \u0026amp;amp;amp;amp;lt;= 9) { $(this).addClass('col1'); } else { if ($product.find('ul li.level1').length \u0026amp;amp;amp;amp;gt; 18) {\n$(this).addClass('col3');\n} else {\n$(this).addClass('col2');\n}\n}\n});\n});\n\u0026amp;amp;amp;lt;\/script\u0026amp;amp;amp;gt;[\/php]\n\n\u003ch3\u003e3. Replace navigation code with mega menu\u003c\/h3\u003e\nNow go to Header.html and replace the following code\n\n[php]\n\u0026amp;amp;amp;lt;div id=\u0026amp;amp;amp;quot;HeaderLower\u0026amp;amp;amp;quot;\u0026amp;amp;amp;gt;\n          %%Panel.SideCategoryList%%\n          %%Panel.PagesMenu%%\n      \u0026amp;amp;amp;lt;\/div\u0026amp;amp;amp;gt;\n[\/php]\n\nwith the code below.\n\n[php]\n\u0026amp;amp;amp;lt;div class=\u0026amp;amp;amp;quot;PageMenu\u0026amp;amp;amp;quot;\u0026amp;amp;amp;gt;\n        \u0026amp;amp;amp;lt;div id=\u0026amp;amp;amp;quot;HeaderLower\u0026amp;amp;amp;quot;\u0026amp;amp;amp;gt;\n            %%Panel.SideCategoryList%%\n            %%Panel.PagesMenu%%\n        \u0026amp;amp;amp;lt;\/div\u0026amp;amp;amp;gt;\n     \u0026amp;amp;amp;lt;\/div\u0026amp;amp;amp;gt;\n[\/php]\n\n\u003ch3\u003e4. Add CSS in style.css\u003c\/h3\u003e\n\n[css]\n.sf-vertical, .sf-vertical li{\nwidth:auto!important; }\n \n.col1 .li_group, .col2 .li_group, .col3 .li_group{\ndisplay: block;\nfloat: left;\nwidth: 227px !important; }\n \n.sf-menu li.level1 \u0026amp;amp;amp;gt; ul, .sf-menu li.level2 \u0026amp;amp;amp;gt; ul,\n.sf-menu li.level3 \u0026amp;amp;amp;gt; ul, .sf-menu li.level4 \u0026amp;amp;amp;gt; ul{\nposition: absolute !important;\nwidth: 230px !important;\nbox-shadow: 0 0 7px #ccc; }\n \n.PageMenu .sf-menu li ul{\nz-index: 150 !important; }\n \n.PageMenu .sf-menu ul \u0026amp;amp;amp;gt; li \u0026amp;amp;amp;gt; ul \u0026amp;amp;amp;gt; li{\nposition: relative !important;\nz-index: 9999 !important; }\n \n.PageMenu .sf-menu \u0026amp;amp;amp;gt; ul \u0026amp;amp;amp;gt; div.li_group \u0026amp;amp;amp;gt; li{\nposition: relative !important;\nz-index: 99!important; }\n \n.PageMenu li ul ul{\nleft: 155px !important;\nmargin-left: 0;\ntop: 0 !important;\nwidth: 230px !important;\nborder-left:0px none!important; }\n \n.col1 ul{\nwidth: 227px !important; }\n \n.col2 ul{\nwidth: 454px !important; }\n \n.col3 ul{\nwidth: 681px !important; }\n[\/css]\n\n\u003ch3\u003e5. Remove width:auto;\u003c\/h3\u003e\nRemove width:auto; from below classes from style.css\n\n[css]\n#SideCategoryList ul, #SideCategoryList .sf-menu ul\n #SideCategoryList li,\n #SideCategoryList .sf-menu li\n[\/css]\n\n\u003ch3\u003e6. See multilevel mega menu in action\u003c\/h3\u003e\n\u003cimg class=\"size-full wp-image-664 alignnone\" src=\"http:\/\/localhost\/dit\/wp-content\/uploads\/2016\/06\/Multilevel-Menu-1024x498.jpg\" alt=\"\"\u003e\n\u003ch3\u003eNeed Help?\u003c\/h3\u003e\nWe’re certified \u003ca href=\"http:\/\/localhost\/dit\/services\/bigcommerce-design-development\"\u003eBigCommerce design services\u003c\/a\u003e and can help you with anything you need. \u003ca href=\"http:\/\/localhost\/dit\/contact\"\u003eContact us\u003c\/a\u003e here.","brand":"DitDemo","offers":[{"title":"Default Title","offer_id":31632222584922,"sku":"","price":0.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1353\/8361\/products\/Screenshot-at-Jul-01-13-49-01-1.jpg?v=1576670073","url":"https:\/\/sportswear-8.myshopify.com\/products\/how-to-create-multilevel-mega-menu-in-bigcommerce","provider":"sportswear","version":"1.0","type":"link"}