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

Brine: Nav to change color after scrolling past Hero


AThompson_social

Question

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 post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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

Posted Images

15 answers to this question

Recommended Posts

  • 1

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 post
  • 0

@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 post
  • 0

@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?

 

Edited by AThompson_social
Link to post
  • 0

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 post
  • 0

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 post
  • 0

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!

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

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? 

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

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...