How to create multilevel mega menu in BigCommerce

Screenshot-at-Jul-01-13-20-13-1024x574

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.

<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

<div id="HeaderLower">
          %%Panel.SideCategoryList%%
          %%Panel.PagesMenu%%
      </div>

with the code below.

<div class="PageMenu">
        <div id="HeaderLower">
            %%Panel.SideCategoryList%%
            %%Panel.PagesMenu%%
        </div>
     </div>

4. Add CSS in style.css

.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

#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.

Summary
Article Name
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.
Author
Publisher Name
Dit India
Publisher Logo
Tags:
Jaimin Gohel About the author

Geek & daddy of UI Development team at Dit India Passionate about trying new tech stuff. Open source lover.

No Comments

Leave a Comment: