Shopify themes, liquid, logos, and UX
Hi guys,
I would like to remove the header from the menu drawer. Could anyone help me?
I use the Dawn theme.
miyucollective.com
Solved! Go to the solution
This is an accepted solution.
If you mean to make the drawer appear on top of the header, here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the base.css (or theme.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
#menu-drawer {
position: fixed;
top: 0;
}
@media screen and (max-width: 749px) {
#menu-drawer {
width: 80%;
}
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. 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
Hi @Nienke_pr,
Could you please clarify what you mean by removing the header from the menu drawer? This information would greatly assist us in providing you with the necessary support.
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
I hope the photo helps. When I open the menu drawer I would like to delete the header
For desktop and mobile
This is an accepted solution.
If you mean to make the drawer appear on top of the header, here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the base.css (or theme.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
#menu-drawer {
position: fixed;
top: 0;
}
@media screen and (max-width: 749px) {
#menu-drawer {
width: 80%;
}
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. 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
Thanks! And is it also possible to remove the header on the left when the menu drawer is open as shown in my picture?
Unfortunately, since the drawer is part of the header, removing the header will also result in the drawer being removed. Can we do any other customization for 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
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025