Goal: Evenly space three columns and center content in a Shopify mega menu (Be Yours theme), with a solution that scales to future columns and applies to other menus (ABOUT, B2B).
Initial guidance: Suggested adding custom code before in theme.liquid. Result: Visually adjusted spacing, but introduced side effects—an enlarged gap near the promo image and altered link spacing in other menus.
Refined guidance: True uniform spacing isn’t fully possible because menu items have different text lengths. A compromise approach was proposed by adding code below the in theme.liquid to better approximate even distribution and centering without the earlier side effects.
Outcome: The compromise was accepted as satisfactory. No exact code was provided in the thread text; screenshots and code placement locations were central to the solution.
Notes: Mega menu = large, multi-column dropdown navigation. theme.liquid = the main Shopify layout file where global CSS/JS can be injected. Status: Resolved with a workable compromise; no remaining open questions.
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
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
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 “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Its a decent compromise, that should do the trick. Thank you good sir!
