How can I adjust the width of a drop down menu in the Dawn theme?

Shopify Discussion

Topic summary

A user seeks to reduce the width of dropdown menus in the Dawn theme so they fit the text content rather than extending full-width.

Proposed Solution:

  • Navigate to Online Store → Theme → Edit code
  • Locate component-list-menu.css in the Assets folder
  • Add CSS code at the bottom: details.header__submenu > ul { width: max-content !important; }

Implementation Issues:

  • The original poster reported the suggested file doesn’t exist in their theme and the fix didn’t work
  • An alternative suggestion was made to adjust settings via Customize → Sections → Header → Desktop menu type

Outcome:

  • Two other users confirmed the CSS solution worked successfully for them in Dawn and Craft themes
  • The original poster’s issue remains unresolved, as they couldn’t locate the specified file
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

The drop down menu on my site looks like this, i want to change the width of dropdown (only equal to size of text, just like other sites)

am_i_abdullah_1-1675671117819.png
am_i_abdullah_1-1675671117819.png568×218 8.38 KB

Thanks in advance for helping me out, I’m using dawn theme and my site is dealsoye.pk

2

Hi @am_i_abdullah ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-list-menu.css->paste below code at the bottom of the file:

.js details>.header__submenu {
    width: max-content !important;
}

I hope it would help you
Best regards,

Kate | PageFly

2 Likes
3

there’s no file named theme.scss.liquid

4

not working

5

@LitCommerce kindly help me

6

Hi @am_i_abdullah ,

Please go to Customize > Sections > Header > Desktop menu type.

Screenshot.png
Screenshot.png631×741 174 KB

you can change it here, it will display fine

1 Like
7

Thanks Kate, this worked well!

1 Like
8

it worked thanks! theme Craft