How To Remove Header In Menu Drawer

MMast · ‎06-24-2024

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 · ‎06-24-2024

Hi @MMast

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

<style>
.menu-opening .menu-drawer { width: 100vw!important; }
sticky-header:has(.menu-opening) .header__heading-link,
sticky-header:has(.menu-opening) .header__icons {
display: none;
}
</style>

Best regards,

Dan from Ryviu

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

MMast · ‎06-24-2024

This is what the bottom of the drawer looks like:

Dan-From-Ryviu · ‎06-24-2024

Please update the code to this

<style>
.menu-opening .menu-drawer { width: 100vw!important; }
sticky-header:has(.menu-opening) .header__heading-link,
sticky-header:has(.menu-opening) .header__icons {
display: none;
}
sticky-header:has(.menu-opening) .menu-drawer {
height: calc(100vh - 44px);
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

theycallmemakka · ‎06-24-2024

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 </body>

<style>
header:has(details[open]) h1.header__heading ,
header:has(details[open]) .header__icons.header__icons--localization.header-localization {
    opacity: 0;
}
</style>

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

Support Me: Buy me a Coffee

For quick response - Message Me

Ping me at: theycallmemakka@gmail.com

BSSCommerce-HDL · ‎06-24-2024

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

MMast · ‎06-24-2024

This is the result I got:

BSSCommerce-HDL · ‎06-24-2024

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

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSS-TekLabs · ‎06-24-2024

- 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.

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

Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

How To Remove Header In Menu Drawer

How To Remove Header In Menu Drawer

Community Blog Articles