Brine: Nav to change color after scrolling past Hero

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

@tuanphan 

40 minutes ago, AThompson_social said:

@tuanphan 

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

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

@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;
}

@ThompsonWebDesign @paul2009 @lu.diehl @colin.irwin @ANI.agency If any of you have any thoughts on this, I would greatly appreciate the help

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 Thank you so much! this is very helpful. 

the password is socialive

Is there a way to change the color of the nav text instead of just the color of the background?

And to trigger the site tile to change to a different version?

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

@AThompson_social, to change the font color, follow the guidance from @lu.diehl but target 'Header-nav-item' rather than 'Header'. 

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

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!

@lu.diehl thanks so much! 

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!

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.

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? 

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

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 !

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

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.

On 8/25/2021 at 6:10 AM, taylorroy said:

 

 

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

Move code to HomePage Header

10 minutes ago, tuanphan said:

Move code to HomePage Header

wow, of course haha. sometimes you're in too deep and need to be reminded of the simple things! Thank you!!

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? 

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

13 hours ago, tuanphan said:

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

https://cheerpack-staging.squarespace.com pw: leland

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

https://cheerpack-staging.squarespace.com pw: leland

 

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>