How can I split a long menu over two in the Dawn Theme?

[Sgar37]

Hi i currently have a menu in the Dawn Theme but the first menu is very long and i want it to split over 2 without having a new header and being seperate in mobile

it currently look like this:

I have another 12 items to add to the menu: i current have the below custom CSS into to get the current look
.mega-menu__list {
display: grid;
gap: 1.8rem 4rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
list-style: none;
}
cheers

[Made4uo-Ribe]

Hi @Sgar37

Would you mind to share your Store URL website? with password if its protected. Thanks!

[Sgar37]

HI

https://gardeningaddicts.myshopify.com/
password: tawngi

cheers

sion

[Made4uo-Ribe]

Thank you for the information.

Try this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

#MegaMenu-Content-3 > ul > li:nth-child(1) > ul { 
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-column-gap: 15px;
}
#MegaMenu-Content-3 > ul > li:nth-child(1) > ul > li:nth-child(2) {
    grid-column: 1;
    grid-row: 7;
}
#MegaMenu-Content-3 > ul > li:nth-child(1) > ul > li:nth-child(3) {
    grid-row: 8;
}
#MegaMenu-Content-3 > ul > li:nth-child(1) > ul > li:nth-child(4) {
     grid-row: 9;
}

#MegaMenu-Content-3 > ul > li:nth-child(1) > ul > li:nth-child(5) {
    grid-row: 10;
}
#MegaMenu-Content-3 > ul > li:nth-child(1) > ul > li:nth-child(6) {
    grid-row: 11;
}
#MegaMenu-Content-3 > ul > li:nth-child(1) > ul > li:nth-child(7) {
    grid-row: 12;
}
#MegaMenu-Content-3 > ul > li:nth-child(1) > ul > li:nth-child(8) {
    grid-row: 13;
}
#MegaMenu-Content-3 > ul > li:nth-child(1) > ul > li:nth-child(9) {
    grid-row: 14;
}

• And Save.
• Result:
• 

[Sgar37]

Thank you @Made4uo-Ribe that worked Perfectly

[Ianjs]

Hello,

I’ve just found this and it’s exactly hat I’m looking for. I added to my “base.css” but it didn’t change anything to this menu list, It’s still the same.

Would I need to teak it for my case?

Thanks

[Ianjs]

“Tweak”

[Made4uo-Ribe]

Hi @Ianjs

You maye have different code iny our store. Would you mind to share your store URL? Thanks!

[Daniela1910]

Hi,

I have the same problem but the provided code doesn’t work. Here is how my drop-down menu looks like

and it continues with 9 more fields. Can you help me separate all these links to 3 columns? I’d be really thankful.

Cheers

[Made4uo-Ribe]

Hi @Daniela1910

Please provide your store URL, thanks!

[remudawesternwe]

Hello, I tried this in my Dawn Theme but it did not work. Here is my url: www.remudawesternwear.com

[Made4uo-Ribe]

Hi @remudawesternwe

What design of menu you have in mind? Like this?

If it is check this one.

1. From you Admin page, go to Online Store > Themes
2. Select the theme you want to edit
3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
4. Then place the code below at the very bottom of the file.

#MegaMenu-Content-3 > ul > li:nth-child(3) ul.list-unstyled {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

• And save.

[remudawesternwe]

Thanks for your reply! Not quite… I guess what I’m trying to do is create one header and then several “headerless” columns underneath it, for only one particular menu item. Specifically only the “Shop By Collections” menu.