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

[houseofviraasi]

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 . 

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

Please please help

[Mehran_Ali]

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

[houseofviraasi]

https://houseofviraasi.com/

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

[Mehran_Ali · Accepted solution]

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 

[houseofviraasi]

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

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

[Mehran_Ali]

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

[houseofviraasi]

worked wonderfully. thank you so much for the help