How To Remove Header In Menu Drawer

How To Remove Header In Menu Drawer

MMast
Trailblazer
182 1 25

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:

Screenshot 2024-06-23 235904 (2).png

 

What I mean when I say 'drawer effect':

Screenshot 2024-06-24 000900.png

 

https://decemberschild.com/

password: dc

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
8400 1652 1666

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

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

MMast
Trailblazer
182 1 25

This is what the bottom of the drawer looks like:

IMG_0800.jpeg

Dan-From-Ryviu
Shopify Partner
8400 1652 1666

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>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

theycallmemakka
Shopify Partner
1551 353 380

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

BSSCommerce-HDL
Shopify Expert
1004 342 408

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

BSSCommerceHDL_0-1719202941916.png

 

Step 2: Search file theme.liquid

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

BSSCommerceHDL_1-1719202946789.png

 

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

BSSCommerceHDL_2-1719202989067.png

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  😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
MMast
Trailblazer
182 1 25

This is the result I got:

IMG_0801.jpeg

BSSCommerce-HDL
Shopify Expert
1004 342 408

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

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSS-TekLabs
Shopify Expert
480 147 165

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

step.png


- 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;'

BSSTekLabs_0-1719219416523.png

 

- Here is the result you will achieve:

BSSTekLabs_1-1719219531442.png

 

- 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 .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency