Jump to content

Joeyearthly

Member
  • Posts

    5
  • Joined

  • Last visited

Reputation Activity

  1. Like
    Joeyearthly got a reaction from lu.diehl in Brine: Nav to change color after scrolling past Hero   
    @AThompson_social, to change the font color, follow the guidance from @lu.diehl but target 'Header-nav-item' rather than 'Header'. 
  2. Like
    Joeyearthly reacted to lu.diehl in Brine: Nav to change color after scrolling past Hero   
    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 😉
×
×
  • 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.