Jump to content

Brine: Nav to change color after scrolling past Hero

Recommended Posts

Hi friends, 

I am trying to trigger my navigation to change color after scrolling past the hero. Is there a way I can trigger the change by div or pixel? I currently have my nav as a sticky nav and want to keep that. this is what I'm working with. 

 

/*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/
Header {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
}

   // fix mobile nav
   .Mobile-bar--top
    {
     position: fixed;
       top: 0;
       left: 0;
       right: 0;
       background: #173d56;
   }
   .Mobile-bar {
       position: fixed;
       z-index: 99999;
   }

   // move mobile overlay down
   .Mobile-overlay-menu-main {
       padding-top: 80px;
   }

any help would be GREATLY APPRECIATED 

link to site

Link to comment

@tuanphan So I can't get it to trigger a color change. the Page is an index so do I need to put the script in the header of each individual page in the index or just in the header of the index? i've tried both and I can't get it to work. In addition, even when using the script, I can't get the nav to be sticky to the top of the window.  I have the nav sticky using the first set of css

 

script in the header 

<script>
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.color = "#6ed78f";
  } else {
    document.getElementById("header").style.color = "#173d56";
  }
}
</script>

css for making the nav stick to the top of the page 

/*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/
Header {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
}

   // fix mobile nav
   .Mobile-bar--top
    {
     position: fixed;
       top: 0;
       left: 0;
       right: 0;
       background: #173d56;
   }
   .Mobile-bar {
       position: fixed;
       z-index: 99999;
   }

   // move mobile overlay down
   .Mobile-overlay-menu-main {
       padding-top: 80px;
   }

css for the transition color change

header{
   transition: 0.2s;
  color: #173d56;
}

 

Link to comment

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:

1. Add this to Settings > Advanced > header code injection:

(Change the scroll height you wish to change the color, here it is set to 400 px)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Header").addClass("on-scroll");
    } else {
       $(".Header").removeClass("on-scroll");
    }
});
</script>

 

2. Add this to Design > Custom CSS 

Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)

.Header{
  background-color: blue!important;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
}

.on-scroll{
  background-color: red!important;
}

.Site-inner{padding-top: 50px;}

Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

Link to comment
  • 1 month later...

For what it's worth, for templates based on Brine , the number of concerns when creating a fixed header are much greater than is typically appreciated, and include:

  • differences between index and non-index pages
  • differences between first-child index sections with image vs without.
  • whether you have the headers set to overlap on index pages
  • what headers (top/bottom) are enabled
  • whether the screen is resized
  • whether the announcement bar is used
  • whether the announcement bar is used but then closed by user
  • whether text in the announcement bar is wrapped when screen width changes
  • whether the header covers up content when anchor links (same-page "jump" links) are used
  • whether then navigation wraps or font size changes on width change (and therefore header height changes, and therefore necessary padding)
  • whether you want the header fixed on mobile (and again, whether you also want the announcement bar fixed on mobile along with it)
  • whether you have the mobile information bar (MIB) enabled for mobile devices.
  • and more.

A lot of these issues have been around...for years.

If you have a very simple use case and manage to avoid all of the above (and more) concerns, basic CSS like position:fixed or position:sticky can indeed be used. For other cases, a CSS-only approach will cause some problems that you may not detect (but your users probably will). For those cases, I created Fixit - Fixed Headers for Squarespace - Brine.

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, etc. when scrolled.

Finally, note that using onScroll as proposed in the code samples above is not the most performant way to go about solving the issue. It better to also leverage requestAnimationFrame and/or setInterval when doing such things with onScroll.

-Brandon

Edited by brandon

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

Link to comment
  • 2 months later...
  • 3 months later...

Hi again @lu.diehl

I also have a similar problem here. I was able to make the navigation bar fixed & transparent using the built-in settings, however, the bar turns Black on scrolling and I would like to add a specific colour instead. (see images)

Please can you advise how I can make the Bar this colour when scrolling:

#25AFA4

R37 G175 B164

Screenshot 2020-07-04 at 13.05.21.png

Screenshot 2020-07-04 at 13.05.51.png

Link to comment
  • 2 weeks later...
On 11/22/2019 at 5:12 AM, lu.diehl said:

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:

1. Add this to Settings > Advanced > header code injection:

(Change the scroll height you wish to change the color, here it is set to 400 px)


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Header").addClass("on-scroll");
    } else {
       $(".Header").removeClass("on-scroll");
    }
});
</script>

 

2. Add this to Design > Custom CSS 

Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)


.Header{
  background-color: blue!important;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
}

.on-scroll{
  background-color: red!important;
}

.Site-inner{padding-top: 50px;}

Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

@lu.diehl you have just helped me so much by this post!!!!! you have no idea. 

Thank you!

 

 

Link to comment
  • 1 month later...
On 11/22/2019 at 5:12 AM, lu.diehl said:

Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:

1. Add this to Settings > Advanced > header code injection:

(Change the scroll height you wish to change the color, here it is set to 400 px)


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Header").addClass("on-scroll");
    } else {
       $(".Header").removeClass("on-scroll");
    }
});
</script>

 

2. Add this to Design > Custom CSS 

Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)


.Header{
  background-color: blue!important;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
}

.on-scroll{
  background-color: red!important;
}

.Site-inner{padding-top: 50px;}

Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉

This is a great solution! Thank you.

Link to comment
  • 2 months later...
On 10/20/2020 at 5:27 AM, MariaFY said:

Hi friends, this thread was already helpful for me — changed my header to turn from transparent to white on scroll. I'm using Brine.

On top of this, I'd also like the color of my primary + secondary nav to change. Any leads on what to add to the code? 

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 12/12/2020 at 12:45 AM, JulietteEp said:

Hi ! @lu.diehl Many thanks for your code, it works perfectly !! 

I've been trying for ages to change the color of the navigation links on scroll. I want to put them black (as they are white at the top of the page when I haven't scroll yet). Do you think that you can help me ? 

Thank you so much !

If you share site url, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
On 7/4/2020 at 5:42 AM, lu.diehl said:

Hi @Adam9 - if that is one of your website colors, you can go to your first section and change the background color of that section. The navigation inherit the color of the first section in the Squarespace 7.1 version.

Let me know if this worked!

 

On 11/19/2019 at 4:14 PM, tuanphan said:

You need to use JavaScript to create sticky nav & change color

Reference: https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp

 

Is there a way to apply this JS to only the home page? And it remains as normal on all other pages?  Thanks.

Link to comment
  • 1 year later...
On 8/30/2022 at 3:52 AM, Leland_Creative said:

I am forcing a mobile menu on desktop, and I am on Brine 7.0. Are there any adjustments to this code that I need to make in order for it to work? 

If you share link to your site, we can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/1/2022 at 4:20 AM, Leland_Creative said:

Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Mobile-bar.Mobile-bar--top").addClass("on-scroll");
    } else {
       $(".Mobile-bar.Mobile-bar--top").removeClass("on-scroll");
    }
});
</script>
<style>
  .Mobile-bar {
  background-color: blue!important;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
}

.on-scroll{
  background-color: red!important;
}
.Site-inner{padding-top: 50px;}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.