Header smooth transition kadence theme

  • Hey,

    Lately I’ve been trying to make the header transition smoothly when scrolling down. I’ve come up with some CSS to do that but it does it in reverse, makes the transition smooth but only when scrolling up. No matter what I do I can’t seem to find a solution to that problem. Also didn’t see any option theme customization. Here is the CSS code I came up with that works when scrolling up:

    /* Reverse the sticky header background colors */
    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 1.3s 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;
    }

    I would be glad to hear your takes on the problem or even solutions.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello @westu

    Can you explain the objective you want to achieve? Are you using a sticky header? Are you saying the header jumps or skips when you scroll down using a sticky header? I don’t see any changes to the sticky header when I add the CSS you provided to my test site. Do you have screenshots, a video, or a link for us to view the problem you’re trying to solve?

    Thread Starter westu

    (@westu)

    Hey,

    Thanks for reply, I’ll share the website link so that you can test it yourself. (Don’t mind it being awful at the moment I treat it as a testing ground to level up my skills). Here it is:

    https://mikolajczykciesielstwo.pl

    Try scrolling down and up. I’m trying to achieve the same effect as it does when scrolling up to the very top. Currently it has active that custom CSS that I mentioned in my previous post and still can’t figure out how to make it work for both ways.

    Thanks!

    Hi, @westu !

    I’m sorry for the lack of response from us.

    This is the current transition that I see – https://share.getcloudapp.com/d5uDqkvn.

    Could you confirm if you already achieve the style you want? If not yet, please let us know so we can better help.

    If you have a reference website that does exactly what you want, give us the URL. This would also help us understand the transition you want.

    Kind regards,
    Karla

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header smooth transition kadence theme’ is closed to new replies.