How to do a Navigation with Two or more Columns vs. Just One

[stormbrieldraws]

Hi! So this is my current menu set up, with one column and just linked text:

The URL is https://woolblossom.shop

But I was hoping to do it more like this shop’s:

With two or more columns but also plain text headers at the top. The top theme is currently Boost, but I can’t find a way to change this via the theme itself. Is there any code I can change or add to achieve this? Thank you for any help!

[Xipirons]

Hi @stormbrieldraws

You need to create a mega-menu, not a simple menu with sub-categories.

I’ve checked and it’s possible with your theme Boost.

Here’s how to do it:

1. If you have not already done so, create a nested menu in the Shopify admin area’s Online Store > Navigation section.

2. Open the Theme Editor, and click on the Header section.

3. Pick the main navigation menu in the Main menu setting within the Navigation area of the settings.

4. Click Add menu promotion to add an advert to your mega menu. Add the correct Dropdown link name you want the promotion to show in, and add the Image, Text, Link text and URL.

   

5. Click Save in the Theme Editor, and hover over the relevant top level link. The mega menu should show.

Hope it helps

Let me know if you need further informations

[stormbrieldraws]

Thank you so much- I never would have thought to try it that way haha! Do you know if there is any way to edit the spacing/number of columns? They’re far enough apart that I would rather squeeze all five onto one row vs. starting a second

[Xipirons]

Yes it’s possible

Add this in the css (I don’t know exactly where in the Boost theme) :

.one-quarter {
  width: 20%!important;
}

And you will get this :

[Xipirons]

It’s possible to do that

I answered you in the previous message

[stormbrieldraws]

I’m not too sure where to add it in the theme either- I tried it in the custom CSS of the header section:

But it doesn’t seem to have changed it

[Xipirons]

Try this instead :

.one-quarter {
  width: 20%!important;
}

.mega-dropdown__container.grid.grid--uniform {
display: flex;
}

[stormbrieldraws]

That worked, thank you so so much!

[Xipirons]

Can you accept my answer as a solution ?

Thanks