Navigation Menu Color Change on Scroll (7.1)

This site uses a  custom hamburger menu, but on the home page it disappears into the background upon scroll because it's white and most of the backgrounds down the page are also white. Is there a way to have the word "Menu" change color to black up on scroll to that it appears continuously and doesn't get lost?

https://kennerknecht-design.squarespace.com/

PW: KDG123

Thank you!

Do you still need help on this?

On 11/17/2023 at 8:40 PM, tuanphan said:

Do you still need help on this?

@tuanphanYes, please! The site is now live: https://www.kennerknechtdesigngroup.com/

In your CSS code, find this and change

absolute

to

fixed

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

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>

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!