Bug on mobile version for transparent header that turns white upon scrolling in Dawn Theme

[Tom202]

HI there, with the little help of Javascript and the community here, I managed to make the header of the homepage transparent first, and then turn white when the user scrolls down.

It works smoothly on Dektop device, however on mobile there is a small glitch, i.e. when the header is still transparent and the use touches the Menu icon, the "header" of the menu remains transparent, but it should turn white - see screen recording attached. 

Any idea what to change in the Javascript or css file?

All feedback highly appreciated 🙏

The site is www.bienenblatt.de

[namphan]

Hi @Tom202,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.section-header.menu-open .header {
    background-color: #fff !important;
}

[Tom202]

Hi @namphan , thanks your feedback. I pasted your code, but unfortuantely it did not work. The menu header remains transparent on mobile 😞 

[namphan · Accepted solution]

Hi @Tom202,

I didn't find the code, did you add it to the correct file?

Or you can add it at header.liquid file:

[Tom202]

Perfect! Thanks a lot! It worked 🙂 

[namphan]

Hi @Tom202,

If you have any further questions, you can contact me.
Happy to help you.