Header issues

[adamiko04]

adamiko04

August 4, 2023 at 5:07 pm

Hey,

I’ve been working on my header for my website. I used the built in kadence header builder. It’s quite okay but I’m lacking two things. The first one is whatever I do, I can’t make a smooth transition from transparent header to sticky header with white background when scrolling down from the very top. Only managed to do it when scrolling up, and can’t seem to make it work the other way, when scrolling down.

Here is the code that works for scrolling up:
body .site-main-header-wrap.site-header-row-container.site-header-focus-item.site-header-row-layout-standard.kadence-sticky-header.item-is-fixed {
background-color: transparent;
transition: background-color 0.5s ease;
}

body .site-main-header-wrap.site-header-row-container.site-header-focus-item.site-header-row-layout-standard.kadence-sticky-header.item-is-stuck {
background-color: white;
}

The other problem is that I would like to keep transparent header only on my main page/landing page and for other pages I would like to choose a background since all menu options are invisible due to white background on those sites as well as my header having white text for menu options. I’m using kadence free version.

Thanks!