Issue with transparent header - Dawn 15.3.0

[JAKUBPLU]

Hi guys!

I am having a small issue with my transparent banner on my Shopify website.

I have just inserted the following liquid into ‘header.liquid’

"

.header-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

background: transparent;

border: none;

z-index: 999;

}

"

The header went transparent as I wished, however, the issue appears whenever I click on the hamburger menu on the top left corner.

The picture attached shows the before demonstrating that I successfully implemented the transparent header, but the after picture shows the hamburger menu creates a grey area on the right-hand side. What is the best solution to get rid of this grey outline visible on the right hand side?

[Dan-From-Ryviu]

Please share password protected of your store so I can check and give you the code to solve this

[JAKUBPLU]

‘nemael’

[JAKUBPLU]

Hi - how do you do this?

[Dan-From-Ryviu]

I see you removed the grey area, so here is the code to make the menu appear like the image below. Please add code to Custom CSS in Sales channels > Online store > Themes > Customize > Theme settings.

html .menu-drawer { top: 0px; }
html .header__icon--menu { z-index: 9; }
html  .menu-drawer__navigation {
    padding-top: 8rem;
}