How To Remove Header In Menu Drawer

[MMast]

Thanks in advance!

I am looking to remove the header when the menu drawer is open and still have that drawer effect for mobile. Example shown below.

What I would like removed:

What I mean when I say ‘drawer effect’:

https://decemberschild.com/

password: dc

[Dan-From-Ryviu]

Hi @MMast

Please add this code to your theme.liquid file, after in Online Store > Themes > Edit code

Best regards,

Dan from Ryviu

[theycallmemakka]

Hi @MMast ,

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[BSSCommerce-HDL]

Hi @MMast ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

.header-wrapper:has(.menu-drawer-container[open]) a.header__heading-link.link.link--text.focus-inset,
.header-wrapper:has(.menu-drawer-container[open]) .header__icons.header__icons--localization.header-localization 
{
  display: none;
}
.menu-drawer-container[open] .menu-drawer {
  width: 100vw !important;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[MMast]

This is what the bottom of the drawer looks like:

[MMast]

This is the result I got:

[BSSCommerce-HDL]

Hi @MMast , Can you tell me what device you are using?

[Dan-From-Ryviu]

Please update the code to this

[BSS-TekLabs]

• Here is the solution for you
• Please follow these steps:

• Then find the base.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

sticky-header:has(.menu-opening) .header__heading-link,
sticky-header:has(.menu-opening) .header__icons {
 display: none;
}

#menu-drawer {
     height: calc(100vh - 40px) !important;
}

• Then, find the file ‘component-menu-drawer.css’

• Find the code ‘width: 92vw !important;’ at line 278 and change it to the following: ‘width: 100vw !important;’

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.