Dawn theme header troubleshooting (urgent)

[Sivadarshan]

I am using the latest version of the Dawn theme. In the mobile view, when the hamburger menu is clicked, a transparent space appears. How can I hide the transparent space and make the menu open in full-screen mode?

website: https://mannavan.myshopify.com/

password : offnorth

Thanks in advance.

[DaisyVo · Accepted solution]

Hi @Sivadarshan 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (max-width: 768px){
div#menu-drawer {
    height: 100vh !important;
    top: 0 !important;
}
details.menu-drawer-container > summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset {
    z-index: 99 !important;
}
details.menu-drawer-container > summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset::before {
    display: none !important;
}
details.menu-drawer-container > summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset * {
    color: black !important;
}
}

Here is the result: https://prnt.sc/lLYxfvAx6vKn

I hope this helps

Best,

Daisy