How to make the dropdown menu in my header smaller in dawn theme?

Store Design
, ,

Topic summary

Issue: The header dropdown in a new Dawn theme was too large with excessive white space. The user wanted the submenu to align under its parent (“Shop”) and be narrower on desktop and not full-width on mobile. Screenshots of desktop and mobile behavior were provided.

Desktop fix: The behavior was caused by the Mega Menu. Disabling the Mega Menu switched to a standard dropdown, removing the extra padding and aligning the submenu under its parent. Desktop resolved.

Mobile fix: The menu drawer still appeared too wide. Solution provided: edit theme.css and base.css (Online Store → Theme → Edit code) and add CSS to set the menu drawer/submenu width to 75vw (e.g., details[open].menu-opening > .menu-drawer and .menu-drawer__submenu { width: 75vw; }).

Outcome: Both desktop and mobile issues were resolved. The discussion reached a clear resolution with no remaining questions.

Summarized with AI on December 13. AI used: gpt-5.
1

Hi,

I’m working on a new dawn theme that is not published yet. so basically the DROP DOWN menu in the header section on my website is too big. There is a lot of white padding which I would like to remove and would like the menu to open under its main main menu name. for example I want it the menu under Shop to be under it and the drop box width should be of max content for desktop .

houseofviraasi_0-1732732042825.png
houseofviraasi_0-1732732042825.png1778×1242 139 KB

for mobile I don’t the width to occupy the entire screen. a little less than full should be good.

houseofviraasi_2-1732731296020.png
houseofviraasi_2-1732731296020.png688×1208 32.2 KB

Please please help

2

Can you share your Store URL and password if it password protected

3

https://houseofviraasi.com/

hey, thanks this is my website. doesn’t have any password

4

are you using the mega menu option for that? this behavior you have in menu is due to mega menu if you want to have normal drop down without white space you shou;l remove mega menu

1 Like
5

Oh my, This solved the issue for desktop but not for mobile!

thank you so so much, if possible please help with mobile too

6

Sure Just follow the steps Below:

  1. Go to online store → theme
  2. select three dots and select code edit
  3. Search for the file theme.css and base.css
  4. past that code at the end
.js details[open].menu-opening>.menu-drawer, details[open].menu-opening>.menu-drawer__submenu {
    width: 75vw;
}​

I hope this solution worked for you!
If yes Just like this Reply and Mark it as a Solution and to keep me motivated BUY ME A Coffee

1 Like
7

worked wonderfully. thank you so much for the help

1 Like