Header change of colour when scroll

  • Hi

    I would like a transparent header to begin with, but when I start to scroll, I’d like the header to become white. Is this possible please? I’ve been able to achieve this on other themes but this doesn’t seem to function as I thought in this respect.

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • Branko

    (@brankoconjic)

    Hi @braddobson1,

    Here’s what you can do:

    – Go to Appearance ? Customize ? Header ? Transparent Heaeder and enable it. Double check the options there to make sure it works as you want it.

    – After that, add the following CSS code to enable the background color for the header once it becomes sticky. I added another piece of CSS code in case you want to change the logo margin on sticky state:

    .si-sticky-header #sinatra-header-inner {
  background: #333;
}

.si-sticky-header .sinatra-logo .logo-inner {
  margin-top: 16px;
  margin-bottom: 16px
}

    The custom CSS can be added into the “Additional CSS” field in Appearance ? Customize.

    Has anything changed with this? I’m not using the transparent header, but just a sticky header that I would like to change styles on when I scroll/when it becomes sticky. It seems si-sticky-header is a class on the body, which is always present. Any styles I apply to .si-sticky-header .sinatra-logo .logo-inner are also always present. Is there any other class or id or way to tell when the sticky header is present vs just the header at the top of the page, so that I can change styles on scroll?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header change of colour when scroll’ is closed to new replies.