Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
jasonconway

BRINE Template Stick Nav with Black on scrolling

Question

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.

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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.


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0

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


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0
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).

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...