Full Height Menu Drawer Using Dawn Theme

Store Design
,

Topic summary

A user is attempting to modify the Dawn theme’s mobile menu drawer to cover the full height of the screen, including the header area, similar to how the cart drawer behaves.

Current Issue:

  • The menu drawer displays at full height but stops below the header
  • CSS code copied from previous solutions isn’t producing any changes when added to base.css
  • The code targets elements like #menu-drawer, repositions the close button, and adjusts z-index values

Key Details:

  • The desired behavior is for the menu to overlay the header completely when opened
  • Concern raised about the close button being covered if the menu extends over the header
  • User clarified the provided CSS includes repositioning for the close button

Resolution Status:
Remains unresolved. A support team member indicated this customization cannot be achieved with CSS alone and recommended contacting the theme developer for further investigation. The user is seeking help implementing the code correctly or identifying what’s preventing it from working.

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

Hi,

I am trying to figure out how to make my menu drawer in the header full height. I have looked and tested previous solutions to this problem, but for some reason none of them work for my store.

Below is the code I have tried to implement at the bottom of base.css but nothing changes.

@media(max-width:767px){
#shopify-section-sections--24272054681931__header{
 z-index: 7 !important;
}
#menu-drawer{
    position: fixed;
    top:0;
    min-height: 100vh;
}
#menu-drawer .menu-drawer__navigation{
      padding: 4rem 0;
}
header-drawer .header__icon--menu .icon-close{
    position: fixed;
    top: 15px;
    right: 55px;
    z-index: 9;
}
header-drawer .header__icon--menu[aria-expanded=true]:before{
    position: fixed;
    height: 100vh;
    z-index: 3;
    top: 0;
}
}

If anyone would be able to suggest what I am doing wrong or help fix my issue it would be greatly appreciated.

Store Link: https://lpikqkk71n31wppx-87741759819.shopifypreview.com

Thanks,

Aaron

2

Hi @Aaron-Mihell

Upon checking, your menu is full height here:

image (35).png
image (35).png352×759 7.75 KB

Could you please share with me the screenshot from your end?

3

Hi @DaisyVo ,

Apologies I forgot to clarify that i would like it to cover the header when you open it, similar to when you open the cart drawer.

This is how my store appeared before adding the code so I know that the code I am trying to add hasn’t made any change.

This is how it looks on my end on the desktop site.

Screenshot 2025-01-06 at 3.13.41 pm.png
Screenshot 2025-01-06 at 3.13.41 pm.png1920×1080 235 KB

Hope this helps.

Thanks,

Aaron

4

Hi @Aaron-Mihell

If you want the menu cover the header, then the close button here will be covered:

DaisyVo_0-1736178417631.png
DaisyVo_0-1736178417631.png785×644 279 KB

5

Hi @DaisyVo ,

I believe the code I provided repositions the close button for the menu, I just need some help implementing it into my own store as it seemed to work for other people.

@media(max-width:767px){
#shopify-section-sections--24272054681931__header{
 z-index: 7 !important;
}
#menu-drawer{
    position: fixed;
    top:0;
    min-height: 100vh;
}
#menu-drawer .menu-drawer__navigation{
      padding: 4rem 0;
}
header-drawer .header__icon--menu .icon-close{
    position: fixed;
    top: 15px;
    right: 55px;
    z-index: 9;
}
header-drawer .header__icon--menu[aria-expanded=true]:before{
    position: fixed;
    height: 100vh;
    z-index: 3;
    top: 0;
}
}

Thanks,

Aaron.

6

Hi @Aaron-Mihell

Thank you for sharing it. I have just checked it here, this setting can’t be fixed with CSS code. You might need to check it with the theme developer for further investigation.

Hope you can kindly understand. Thank you!

Best,

Daisy - Avada Support Team.