Dawn Theme - drop down menu don't have scroll only on desktop

Technical Q&A
,

Topic summary

A user is experiencing an issue where dropdown menus on their Shopify Dawn theme website lack scrolling functionality on desktop, specifically when clicking on the “motorcycles” menu item.

Problem Details:

  • The dropdown menu displays all items without a scrollbar, making navigation difficult
  • Issue only occurs on desktop; mobile appears unaffected
  • User shared store URL (caneprint.com) with password access for troubleshooting

Solution Provided:
A helper suggested adding CSS code to the base.css file:

.header__submenu {
  max-height: 60vh;
  overflow: auto;
}

Resolution:
The solution worked after removing the body .js details> selector prefix. The simplified CSS successfully added scrolling to the dropdown menu, allowing users to navigate through longer menu lists on desktop.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hello.

My web don’t have scroll on desktop (drop down menu)

2 hours I’m playing with CSS or media code in theme, base files..

It’s doesn’t works.. How I can change this overflow?

Thanks

Caneprint_0-1685365359918.png
Caneprint_0-1685365359918.png362×844 27 KB

2

Could you please share your store URL? so, I can check and guide you to solve the issue.

3

Yes,sure.

https://caneprint.com/

password 12345

Thanks

4

The website is scrolling well when the dropdown menu is open on the desktop. What issue you are facing?

It’s working fine on my end.

5

try to click on “motorcycles”

I don’t have scroll on desktop for drop down menu

Caneprint_0-1685367992624.png
Caneprint_0-1685367992624.png1907×1014 109 KB

6

This code I use before on my custom theme .

{
display: inline-block;
max-height: 40px;
max-width: 110px;
overflow: hidden;
}

but on DOWN I need something other

7

So, do you want a scroll bar in the menu dropdown? correct me if I am wrong.

and still, If I don’t get you let’s connect and discuss

8

Akibhusen_0-1685368871198.png
Akibhusen_0-1685368871198.png880×902 35.4 KB

Would you like to display like this?

1 Like
9

Yes, your right.

I want like this:

Caneprint_0-1685369066097.png
Caneprint_0-1685369066097.png1020×745 734 KB

10

YES!!!:slight_smile:

11

Add the below line of CSS code at the end of your base.css file.

body .js details>.header__submenu{
max-height:60vh;
overflow: auto;
}

let me know if you have any issue with this.

1 Like
12

It’s not working

Caneprint_0-1685370244943.png
Caneprint_0-1685370244943.png1857×889 54.6 KB

13

But I use this one, CSS without body, and it’s working!!! Thank you!

.header__submenu {
max-height: 60vh;
overflow: auto;
}

2 Likes