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 bigcommerce web design. 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 BigCommerce development services like us to do it for you, or follow these simple steps to do it yourself.
To create Multilevel Mega menu in your Bigcommerce template yourself follow these steps.
Before 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.
1. Add Categories
Login 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.
2. Add JavaScript
Add this below javascript in your HtmlHead.html You will find this file under your BigCommerce admin section in Design > Edit Html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script type="text/javascript">$( document ).ready(function() { $('.SideCategoryListFlyout ul.sf-menu > li').each(function (i, li) { $( "ul.sf-menu > li > ul > li" ).addClass( "level1" );$( "ul.sf-menu > li > ul > li > ul > li" ).addClass( "level2" );$( "ul.sf-menu > li > ul > li > ul > li > ul > li" ).addClass( "level3" );$( "ul.sf-menu > li > ul > li > ul > li > ul > li > ul > li" ).addClass( "level4" ); var lis = $(li).find('li.level1'); for (var i = 0; i < lis.length; i += 9) {lis.slice(i, i + 9).wrapAll(" <div class='li_group'></div>");}var $product = $(li);if ($product.find('ul li.level1').length <= 9) { $(this).addClass('col1'); } else { if ($product.find('ul li.level1').length > 18) {$(this).addClass('col3');} else {$(this).addClass('col2');}}});});</script> |
3. Replace navigation code with mega menu
Now go to Header.html and replace the following code
1 2 3 4 | <div id="HeaderLower"> %%Panel.SideCategoryList%% %%Panel.PagesMenu%% </div> |
with the code below.
1 2 3 4 5 6 | <div class="PageMenu"> <div id="HeaderLower"> %%Panel.SideCategoryList%% %%Panel.PagesMenu%% </div> </div> |
4. Add CSS in style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .sf-vertical, .sf-vertical li{width:auto!important; } .col1 .li_group, .col2 .li_group, .col3 .li_group{display: block;float: left;width: 227px !important; } .sf-menu li.level1 > ul, .sf-menu li.level2 > ul,.sf-menu li.level3 > ul, .sf-menu li.level4 > ul{position: absolute !important;width: 230px !important;box-shadow: 0 0 7px #ccc; } .PageMenu .sf-menu li ul{z-index: 150 !important; } .PageMenu .sf-menu ul > li > ul > li{position: relative !important;z-index: 9999 !important; } .PageMenu .sf-menu > ul > div.li_group > li{position: relative !important;z-index: 99!important; } .PageMenu li ul ul{left: 155px !important;margin-left: 0;top: 0 !important;width: 230px !important;border-left:0px none!important; } .col1 ul{width: 227px !important; } .col2 ul{width: 454px !important; } .col3 ul{width: 681px !important; } |
5. Remove width:auto;
Remove width:auto; from below classes from style.css
1 2 3 | #SideCategoryList ul, #SideCategoryList .sf-menu ul #SideCategoryList li, #SideCategoryList .sf-menu li |
6. See multilevel mega menu in action
Need Help?
We’re certified BigCommerce design services and can help you with anything you need. Contact us here.