Solved

Centre all columns in my Mega Menu lists (Be Yours Theme)

HOH_DXB
Visitor
3 0 0

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.

 

Sapcing columns.JPG

 

Thanks in advance!

Faisal

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1723 477 352

This is an accepted solution.

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.

ThePrimeWeb_0-1711628585481.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 4 (4)

BrewBrains
Shopify Partner
95 13 18

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>

 

 

BrewBrains_0-1711626828780.png

 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

HOH_DXB
Visitor
3 0 0

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.

HOH2.JPG

HOH 3.JPG

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!

ThePrimeWeb
Shopify Partner
1723 477 352

This is an accepted solution.

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.

ThePrimeWeb_0-1711628585481.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
HOH_DXB
Visitor
3 0 0

Its a decent compromise, that should do the trick. Thank you good sir!