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
