Full Height Menu Drawer Using Dawn Theme

[Aaron-Mihell]

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

[DaisyVo]

Hi @Aaron-Mihell 

Upon checking, your menu is full height here:

 

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

[Aaron-Mihell]

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.

Hope this helps.

Thanks,

Aaron

[DaisyVo]

Hi @Aaron-Mihell 

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

[Aaron-Mihell]

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. 

[DaisyVo]

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.