One of my mega menu is too long, how could I split it to two columns?

emsyhouse
New Member
4 0 0

One column of my mega menu have about 14 items...and it is too long, how could I split it to two columns?

I'm using the habitat theme. It would be great if I could split it to two columns of 7 items each, so it is not too long that it takes up the whole page.

 

Thank you!

 

Untitled.png

Replies 9 (9)

Team_OSC
Shopify Partner
101 14 16

Hi @emsyhouse 

Add those submenus in Engineered Wood menu instead of Natural Wood menu or you can add another menu to add those submenus.

 

Regards,

Trishnapare | Team_OSC

- Need a Shopify Developer?

  Hire Me:  Upwork | Website:  Omni Site Creations
- Connect On: Chat on WhatsApp | Email: info@omnisitecreations.com
- Our Services:  Design Changes | Custom Coding | Modifications | New Website
- Your tip, my code.  Buy me a Coffee  ❤️
emsyhouse
New Member
4 0 0

It seems like that would gives each column a headline and it looks like it is two separated category, I wonder if there are any solutions that could have only one headline for the two columns? Thanks.

Team_OSC
Shopify Partner
101 14 16

Hi @emsyhouse 

Paste this code in your theme CSS file:

.thb-full-menu .mega-menu-columns ul{
display: grid;
grid-template-columns: 1fr 1fr;
}

I hope this code will work as you want.

If any queries, please reach us.

 

Regards

Trishnapare | Team_OSC

- Need a Shopify Developer?

  Hire Me:  Upwork | Website:  Omni Site Creations
- Connect On: Chat on WhatsApp | Email: info@omnisitecreations.com
- Our Services:  Design Changes | Custom Coding | Modifications | New Website
- Your tip, my code.  Buy me a Coffee  ❤️

saim007
Shopify Partner
496 64 83

Please provide store url so i can help!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
emsyhouse
New Member
4 0 0

Hi! This is the link to my store: https://07e431-79.myshopify.com/

and the password is shopify

thankyou.

saim007
Shopify Partner
496 64 83

@emsyhouse You have to use below code in your css file

 

.thb-full-menu .mega-menu-columns ul{
display: grid;
grid-template-columns: 1fr 1fr;
}

It will look like this see below screenshot- 

 

saim007_0-1715670537528.png

Please let me know if works!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
emsyhouse
New Member
4 0 0

Thank you it worked! It changes every menu to double columns...are there any ways I could change only the natural wood part to two columns and keep the rest the same (one column)? Thanks

Dawood_Mirza_
Excursionist
68 12 20

Hi @emsyhouse,

Just go to Online Store > navigation > select menu you are using 
Under that You'll see something like 

Dawood_Mirza__0-1715666085374.png

Two sub menu Natural and engineered wood 
To add a new menu, click 'Add New Menu' and name it 'Natural Wood,' then add a link to it.

Next, expand the existing 'Natural Wood' menu and choose seven of the fourteen sub-menus to move to the new 'Natural Wood' menu. This will create three columns, two containing 'Natural Wood' and one with 'Engineered Wood.'

 

Hope to have helped you

BR 

Dawood Mirza

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.

EFOLI-Emilia7
Shopify Partner
316 10 38

Hello @emsyhouse,

Please follow this:

Need to add code into app.css file

 

.thb-full-menu>li:first-child>ul.mega-menu-columns>li>ul{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

 

 Thank you

Emilia7 | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants