Smaller logo for sticky header

  • I am needing the proper css to force the logo in the header to reduce in size when switching to the sticky header when scrolling. Any help with this is much appreciated.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • .full-center .sticky-header.is-sticky #logo.has-img a > img {
        height: 50px;
    }

    Without testing that should do what you want it to. The sticky header gets the class .is-sticky when you scroll, so that should tell the styles to set the logo at 50 pixels high when you’ve scrolled. Of course, you can adjust the height to be whatever you want it to be.

    Thread Starter Drew75

    (@drew75)

    @catacaustic Thanks, but it looks like that didn’t change anything. Added it to my theme file editor css, cleared cache multiple times but get the same result.

    Sorry. I got the wrong class names. Try this

    .full-center .sticky-wrapper.is-sticky #logo.has-img a > img {
        height: 50px;
    }

    If that doesn’t work then it might be worth you digging into it yourself to see where any poential problems are.

    Thread Starter Drew75

    (@drew75)

    @catacaustic Thanks again, it seems that’s not taking either. Yes, I’m sure there’s a conflict somewhere that I need to find.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.