Dawn Theme -- make mega menu split long columns

[Meredithdavey]

Hi,

I’ve been trying to research how to make the menu columns split in two, so people don’t have to scroll to see more the menu,

I want it to wrap over between the two existing columns, but am struggling to get that to work.

[Lakshya_design]

Hello @Meredithdavey

Can you please provide me with the preview URL of the theme

[Meredithdavey]

loreandwhimsy.com is the website.

[CodingFifty]

Hey! @Meredithdavey ,

Go to your Shopify Admin Panel.

Navigate to Online Store → Themes.

Click on Edit Code (not Customize).

Open the theme.liquid file (found inside the Layout folder).

Scroll down and paste the code just before the tag:

[Meredithdavey]

Okay, thanks, how would I extend the width of the column?

[CodingFifty]

Try this code

[Meredithdavey]

Another question, can I make it wider or is that not possible? Right now they’re a little cramped, but I’m not sure how many columns/width the 35% is based off of.

[CodingFifty]

Add this code

.header--top-center .mega-menu__list{
    gap: 25px !important;
}

.mega-menu__list .list-unstyled.two-columns {
    width: 127% !important;
}

[deadrosesuk]

Would you be able to help me out too on this? I’ve followed your steps and added the code and it’s worked lovely, but just wonder if you could help me separate my columns into two sections -