Jump to content

Navigation Menu Color Change on Scroll (7.1)

Recommended Posts

  • Replies 6
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 3 weeks later...
  • 4 months later...

Hi @tuanphan!

I have a similar issue that I'm looking to resolve. I've got a custom hamburger menu on a 7.1 site here:

https://www.esplanadewakefield.ca/?password=demo
Password = demo

Looking to find a way to change the colour of the hamburger menu on scroll and have it stay fixed (Like I have setup for the logo.) The white works for the first section but need it to be this green #746837 for the rest. 

Any chance you'd be able to help with a solution? Many thanks! 

Alana

Link to comment
On 4/18/2024 at 12:27 AM, alana said:

Hi @tuanphan!

I have a similar issue that I'm looking to resolve. I've got a custom hamburger menu on a 7.1 site here:

https://www.esplanadewakefield.ca/?password=demo
Password = demo

Looking to find a way to change the colour of the hamburger menu on scroll and have it stay fixed (Like I have setup for the logo.) The white works for the first section but need it to be this green #746837 for the rest. 

Any chance you'd be able to help with a solution? Many thanks! 

Alana

Add this code to bottom of Code Injection > Footer

<script>
  $(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .test-something .burger-inner>div {
    background-color: #746837 !important;
}
</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
4 hours ago, tuanphan said:

Add this code to bottom of Code Injection > Footer

<script>
  $(function(){
 var visibleTop = 800;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header#header').addClass('test-something');
        }
        else {
            $('header#header').removeClass('test-something');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .test-something .burger-inner>div {
    background-color: #746837 !important;
}
</style>

 

Amazing! Worked perfectly. @tuanphan thank you so much!

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.