Dawn Theme Hamburger Menu Full Screen On Mobile

Store Design
, , , ,

Topic summary

A user seeks to make the Dawn theme’s hamburger menu display full-screen on mobile devices.

Solutions Provided:

Multiple respondents offered CSS-based fixes with similar approaches:

  • Add a media query targeting mobile viewports (max-width: 990px or 767px)
  • Apply width: 100vw !important to the .menu-drawer class
  • Implementation steps involve editing the theme code via Admin > Online Store > Themes > Edit code
  • The CSS should be added to the base.css file in the Assets folder

Technical Details:

The code snippet follows this structure:

@media(max-width: 767px) {
  .menu-drawer {
    width: 100vw !important;
  }
}

All solutions recommend saving the file after adding the code to the bottom. The discussion appears resolved with multiple working solutions provided.

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

Hi. Does anyone know how to make the hamburger menu full screen on mobile in dawn theme? I want to fill up the gap from the right hand side.

AndreiGhetu_0-1680826444114.png
AndreiGhetu_0-1680826444114.png334×695 14.5 KB

2

@media screen and (max-width: 990px) {

.menu-drawer {

width: 100vw;

}

}

3

Go to your store admin > Sale channels > Online stores > Themes > Edit code > Assets > open base.css file and add this code at the bottom then save file

.menu-drawer { width: 100vw !important; }
4

Hi @AndreiGhetu,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
.menu-drawer { width: 100vw !important; }
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly