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

[emsyhouse]

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!

[Team_OSC]

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

[emsyhouse]

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]

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

[saim007]

Please provide store url so i can help!

[emsyhouse]

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

and the password is shopify

thankyou.

[saim007]

@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- 

Please let me know if works!

[emsyhouse]

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_]

Hi @emsyhouse,

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

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

[EFOLI-Emilia7]

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