BRINE Template Stick Nav with Black on scrolling

Hi Everyone,

I've created a client site using Brine and set the navigation to float on the header image. But, I really need to have a sticky header so that when scrolling, the nav section switches to a black background.

I used some code which does make the nav sticky, but this does not switch the navigation block, so, the links are currently not viewable when scrolling over the rest of the page.

Header {
   position: fixed !important;
   top: 25px !important;
   left: 0 !important;
   right: 0 !important;
}

I want the header to be sticky on all pages.

I hope there is an easy fix for this?

Many thanks in advance.

In this case, you need to use JavaScript.

With JS, you can add a CSS Class to Nav on scroll, then use background color & position fixed for that class. 

Difficult to help without site url.

You may try the solution suggested here, but also consider that's not most performant way to go about it. See my response at the end of that thread, if you're interested.

Another option is to use Fixit - Fixed Headers for Squarespace - Brine which I created.

Besides helping with making fixed/sticky headers (and accounting for a lot of variables that most CSS-only solution do not account for), it also adds the ability to add/remove a CSS class at the scroll-distance of your choice, making it fairly easy to adjust navigation color, background color, text size, opacity, logo size (or alternate logo), etc. when scrolled.

When simple CSS approaches work, use 'em. If they don't, you can checkout Fixit.

-Brandon

@brandon Useful plugin. Thank you 😋

On 1/3/2020 at 8:27 PM, brandon said:

You may try the solution suggested here, but also consider that's not most performant way to go about it. See my response at the end of that thread, if you're interested.

Another option is to use Fixit - Fixed Headers for Squarespace - Brine which I created.

Besides helping with making fixed/sticky headers (and accounting for a lot of variables that most CSS-only solution do not account for), it also adds the ability to add/remove a CSS class at the scroll-distance of your choice, making it fairly easy to adjust navigation color, background color, text size, opacity, logo size (or alternate logo), etc. when scrolled.

When simple CSS approaches work, use 'em. If they don't, you can checkout Fixit.

-Brandon

Thanks for this and It's a definite for me to buy now :0).