Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello,
I am working with the Pursuit theme and I am using a mega menu for the catalog link off the main menu bar. According to the config video from Mile High, the sidebar/Categories menu on the left can be either a nested or a mega menu. Ever since initial setup, my sidebar/categories menu has been coming up in mega menu format, even though I do not have any blocks set up configuring it as such.
I'm not very familiar with the structure of the templates for the theme yet, but there seems to be references to mega menu in the CSS for this section. I'm not sure where the "switch" or setting is to tun this off and make that sidebar menu a simple nested menu.
Curious if this is a bug in the theme? I have tested it without any CSS mods or customizations, I rolled back to a previous version of the script, and I tried deleting ALL menu blocks from the Homepage Header settings but no matter what, that side menu continues to come up in mega menu format. (I reinserted the mega menu block for the main menu catalog in case anyone is looking at the code)
Any suggestions would be greatly appreciated.
https://backcountrydepot.myshopify.com/
pwd: TestSite
Hi @ChuckM,
We can convert the category menu into to simple menu with a few lines of CSS code.
Please follow the steps below:
1.In your Shopify admin, navigate to "Online Store" under Sales Channels. Click the three dots next to the theme you wish to edit, then select "Edit Code". Refer to the screenshot for guidance.
2. Next you can find main.css/theme.css/base.css/style.css(it will be based on your theme file)
Add the below code to your CSS file:
.categories_menu .second_lvl.nav-dropdown > ul {
display: block;
}
.categories_menu .second_lvl.nav-dropdown > ul > .nav-dropdown__item {
width: 100%;
margin-bottom: 0;
}
.categories_menu .second_lvl.nav-dropdown {
min-width: 310px;
}
If you need further assistance, feel free to reach out! I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans