Dawn Theme Drawer Menu Customization

[Alessio0000]

Hello,

How can I customize the drawer menu to cover also the header? I have tried many codes from previous discussion posts but most of them will cover also the close drawer button.

If it is easier, I am also comfortable with having the header to become white when the drawer opens.

https://7znznovmf1at9jb1-75816665414.shopifypreview.com

Thank you in advance
 

[Moeed]

Hey @Alessio0000 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Alessio0000]

https://7znznovmf1at9jb1-75816665414.shopifypreview.com

[Moeed]

Hey @Alessio0000 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
sticky-header:has(.menu-opening) {
    background: white !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Alessio0000]

Hi Moeed,

Thank you for the code! 

However, I saw that when I close down the drawer menu, the header turns transparent before the drawer closes - leaving an unpleasant visual. Is it possible to add a transformation time to the header changing color?

Thank you in advance

[BSSCommerce-B2B]

@Alessio0000 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
sticky-header:has(.menu-opening) {
    background: white;
}
</style>

Result: