Re: Centre all columns in my Mega Menu lists (Be Yours Theme)
My website: www.houseofhabanero.ae
Access: DXB123
Hello,
I recently setup a mega menu on my site, but I can figure out how to spread the gaps between the 3 columns evenly.
Ideally a solution where any future columns would also be affected in the same way would be amazing.
Thanks in advance!
Faisal
It won't be even because not every menu item is the same size, but the closest you can get it probably this.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.mega-menu__item {
width: max-content !important;
margin: 0 auto !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hi @HOH_DXB ,
Actually, the spacing is okay, it is looking off due to the text length. But, still if you want to change it, follow the step below.
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.mega-menu__item:nth-child(2) {
max-width: 124px;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hi @BrewBrains,
Thank you so much for the support. Yes you are right, it just looked off.
It did what you said, however the gap between the Promo image is now quite big. Also it has affected the other menu's link spacing.
Is there any way to get everything centered and looking spaced evenly?
This also goes for the ABOUT and B2B menus where all the links are to the left side of the page. (ideally everything is in the center.
Thank you very much!
It won't be even because not every menu item is the same size, but the closest you can get it probably this.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
.mega-menu__item {
width: max-content !important;
margin: 0 auto !important;
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024