Putting dropdown menu into two columns - dawn theme

Store Design
, , ,
1

Hello! I would like to put my dropdown menu items into two columns on my home page for two menu items, “márkák” and “konyhai kisgépek”. I use the dawn theme.

My website is the following: https://www.konyhakompassz.com/

Thank you!

1 Like
2

Hi @konyhakompassz

Check 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:

details[open] > .header__submenu {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.list-menu--disclosure {
    width: 40rem;
}

And Save.

Result;

Made4uoRibe_0-1711040995577.png
Made4uoRibe_0-1711040995577.png624×484 131 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thank you so much! interestingly, it didn’t work when I put it on the bottom of base.css, but it did when I put it in the custom css section of the header.

4

Hi,

This is the best simple solution, thank you! One question though; is this also possible to apply to only 1 certain menu-item? So only 1 dropdown-list in your menu? I have only 1 menu-item ‘brands’ that is very long and I would love to give this 3 or even 4 columns. But all the other drop-down only have 4-8 items so this looks very stupid when they appear in 4 columns aswel.

Hope you can help, thanks!

5

Can I take a look in your store? Thanks!

6

Yes of course that would be great, this is my site

I would love to create 2 or more columns in the drop down for ‘BRANDS’ only.

7

Thanks for the info, check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
ul#HeaderMenu-MenuList-9 {
    width: 40rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 1450px) {
    ul#HeaderMenu-MenuList-9 {
        position: absolute;
        right: 10%;
       
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
8

Thank you so much for helping me out! I really appreciate it!

(sorry for the delay, the flu hit me last week..)

9

I am wanting to the same thing but have the drop down menu on my store!!

Hope you can help out.