Hi everyone,
I’m using the Atelier theme and the header is already set to be transparent at the top and turn white on scroll (default theme behaviour).
What I want to add is only a hover animation:
The header background changes on hover, but the icons/logo stay white, making them invisible.
Request
Can anyone help me with the correct CSS selectors for the Atelier theme to make the logo + icons turn black on hover, while keeping scroll behaviour unchanged?
Code used:
.site-header,
.header,
.header-wrapper {
background-color: transparent;
transition: background-color 0.25s ease;
}
.site-header:hover,
.header:hover,
.header-wrapper:hover,
.site-header.is-scrolled,
.header.is-scrolled,
.header-wrapper.is-scrolled {
background-color: #ffffff !important;
}
Thanks in advance.
@runwayfashion You’re almost there, the hover is working, but the text/icons aren’t changing because Atelier controls their color with separate scoped selectors, not the header wrapper.
In this theme, the logo, menu links, and icons don’t inherit color from the header background. They have explicit color rules that stay “white” until the scrolled state kicks in.
So on hover, you need to target the header text/icon elements inside the non-scrolled state, not the header container itself. In other words: background and foreground are handled independently in Atelier.
Look for selectors related to:
header logo fill / svg
header menu links
header icon buttons
under the transparent / not scrolled state, and mirror the same color rules used by .is-scrolled.
Once those are applied on :hover, the scroll behaviour will remain untouched.
Hi, thank you for the information.
Really & truly I’m not sure how?
Hi @runwayfashion
Could you share the link to your store?
@runwayfashion The solution is to target the same selectors used in the scrolled header state (logo, menu links, icons) and apply those color rules to the header’s :hover state as well. This keeps the scroll behaviour intact while making hover work correctly.
Please add this code to Custom CSS in Theme settings and check again
header#shopify-section-sections--25843849167176__header_section:hover #header-component {
--header-logo-display: unset;
--header-logo-inverse-display: unset;
--header-bg-color: unset;
--color-foreground: inherit;
--color-foreground-rgb: inherit;
--color-background: inherit;
--color-background-rgb: inherit;
--color-border: inherit;
--color-border-rgb: inherit;
}
Best regards,
Dan from Ryviu: Product Reviews App
Hi, I’m running into an issue with the cart count color in the header:
Current behaviour: The cart count circle background is white.
Additional detail: When I scroll down on home page, the cart count correctly turns black on scroll.
Problem: When I hover over the header, the cart count stays white it doesn’t switch to black like it should.
Do you know why the hover isn’t triggering the color change and how to fix it?
URL: Runway
current code:
header#shopify-section-sections–26184826945864__header_section:hover #header-component {
–header-logo-display: unset;
–header-logo-inverse-display: unset;
–header-bg-color: unset;
–color-foreground: inherit;
–color-foreground-rgb: inherit;
–color-background: inherit;
–color-background-rgb: inherit;
–color-border: inherit;
–color-border-rgb: inherit;
}
.site-header,
.header,
.header-wrapper {
background-color: transparent;
transition: background-color 0.25s ease;
}
.site-header:hover,
.header:hover,
.header-wrapper:hover,
.site-header.is-scrolled,
.header.is-scrolled,
.header-wrapper.is-scrolled {
background-color: #ffffff !important;
}
I see you already solved the issue.
Not the cart icon itself, the cart number badge.
If you add a product to the cart, go back to the homepage and hover over the header, you’ll see the cart number circle stays white and doesn’t change to black.
It only switches to black after you scroll. It should also change on hover, the same way the other header elements do.
