Transparent Header overrides Sticky Header settings on scroll up

[katia.jarne]

katia.jarne

June 7, 2025 at 7:42 am

Hi Kadence team,
I’m experiencing an issue related to the interaction between the transparent header and the sticky header.

Here’s my settings:
Sticky Header:
– Logo: image-1.svg
– Background color: #ffffff
– Sticky settings: “Entire header”, visible on scroll up
When the transparent header is disabled, the sticky header works perfectly as expected when scrolling up.
However, as soon as I enable the transparent header, configured as follows:

Transparent Header:
– Different logo: image-2.svg
– Background color: #000000 with opacity set to 0.3
…the transparent header displays correctly on page load, but when I scroll down and then back up (to trigger the sticky header), it seems like the sticky header does not apply its own styles. Specifically:
– The logo remains the one from the transparent header (image-2.svg)
– The background remains semi-transparent black instead of switching to the white background defined for the sticky header
=> It appears that the transparent header styles are persisting, and overriding the sticky header settings, including the logo, background color, and possibly other elements like navigation link colors and hover states.

I’ve:

Verified all customizer settings (Sticky Header and Transparent Header)
Cleared browser and site cache
Disabled all plugins for testing

Still, the issue remains.
Is this a known issue or expected behavior? Shouldn’t the sticky header fully override the transparent header once it’s triggered?

Thanks for your help!