A user seeks to replicate a header effect from a reference site: an inverted color scheme with transparency that becomes white on scroll (both desktop and mobile).
Initial Solution:
theme.liquid after <head> that successfully achieved the basic invert effect on the homepage.Mobile Hamburger Menu Issue:
The hamburger icon wasn’t affected by the color inversion initially. Multiple CSS solutions were attempted:
base.css file insteadCurrent Status:
The solution stopped working after a theme update. BiDeal-Discount identified syntax errors in the user’s base.css file and provided updated CSS targeting the menu drawer container with media queries for mobile screens. The issue remains unresolved as the latest suggested code hasn’t been confirmed working.
Hi’ there is an invert effect on the header in this shopify website
and the header is also transparent until the mouse is on it.
When scrolled down it become white both on web and mobile.
Is there any way to make it ?
https://wmqgez-r2.myshopify.com/
Warm regards.
Hi @Artez
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Done it, hard refresh, still don’t do the effect dear.
Please add this code to theme.liquid file, after in Sales channels > Online store > Themes > Edit code
{% if template == 'index' %}
{% endif %}
Wow Dan! works amazing.
one thing. The hamburger on mobile is not affected by the invert color, but when scroll down we do see it.
Is it possible to add the effect of invert to white on the hamburger menu on mobile?
It is important when scrolled down it invert back to black .
Hi @Artez
to make humbeger icon to white color, let use this Custom CSS code:
#Details-menu-drawer-container .header__icon svg path {
fill: #fff;
}
It make it white but after scrolling we don’t see it.
I want it to be white then turn to black when scrolling down please.
let use this code:
#shopify-section-sections--18541339607221__header.scrolled-past-header #Details-menu-drawer-container .header__icon svg path {
fill: currentColor;
}
Let try to add to the end of file base.css, not using theme settings pls
Genius! thank you dear.
@BiDeal-Discount This don’t work in the current version, even if applied as explained in that topic.
use this
#shopify-section-sections–18541339607221__header:not(.scrolled-past-header) #Details-menu-drawer-container .header__icon svg path {
fill: #fff;
}
Please use this code
@media (max-width:749px) {
.menu-drawer-container .header__icon span { color: #fff; }
.scrolled-past-header .menu-drawer-container .header__icon span { color: #000; }
}
I tried it wont work
