The drop-down menu goes under the screen on Dawn theme

[a_duda88]

Hello!

I’m making a store on the Dawn theme. I have a problem with the drop-down menu.

I have a lot of items for the drop-down menu, and on the computer it goes under the screen (as in the first and second screenshot). Tell me how I can make it wider and more convenient (for example, as in the third screenshot).

Thank you in advance

Link to the store: https://wlab-7444.myshopify.com/

[Sanjay25]

Hey,

Please follow the below steps to solve this issue.

1. Go to Online Store->Theme->Edit code

2. Go on Asset and open the base.css file.

3. Add the below CSS in bottom of the file.

header-menu .header__submenu{
columns: 2;
}
.list-menu–disclosure{
width:30rem !important;
}

Screenshot: https://d.pr/i/fnroee

Let me know if you have any queries.

[BSS-Commerce]

Hi @a_duda88

Please follow these steps:

• Choose Theme => Customize


Then go to and click on Header and find the Desktop menu type setting and change it to Mega menu as shown below.

We hope that this can help you.

[a_duda88]

Thanks for the answer!
I did as you showed, but all the menu items go down (photo bellow), is there any way to divide them into rows?
And is it possible to customize the menu items somehow? For example, add a stroke when hovering the mouse cursor

[BSS-Commerce]

Hi @a_duda88

1. The problem of the submenu still being lined up when setting up the Desktop menu type is the Mega menu because all submenu is at the same level. This problem is caused by Shopify’s default function.

To remove that you can follow these steps:

• Find the Edit code in Theme:

• Then, you go to header.liquid file in the Edit code and find the code below to delete them:

• Here is the result:

2. Customizing the menu you can do as follows:

• Please find the file component-mega-menu.css and find the code below:

You can add the bold by using font-weight property as below. It will bold text when hovering on the submenu (hover effect you can customize based on CSS code. You can use the above suggestion or design it if you want).

.mega-menu__link:hover,
.mega-menu__link--active {
  color: rgb(var(--color-foreground));
  font-weight: 700 !important;
  text-decoration: underline;
}

We hope that these can help you.