anchor link and menu highlighting

Hey James,
Thanks for the link to your page, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
window.addEventListener('load', function() {
  var contactSection = document.getElementById('contact');
  var menuItem467 = document.querySelector('#menu-item-467 .avia-menu-text');
  
  if (!!contactSection) {
    function isHeaderScrolledFull() {
      var header = document.getElementById('header');
      return header && header.classList.contains('header-scrolled');
    }
    
    function updateMenuItemColor() {
      if (isHeaderScrolledFull()) {
        var contactRect = contactSection.getBoundingClientRect();
        var menuItemRect = menuItem467.getBoundingClientRect();
        var contactCenter = contactRect.top + contactRect.height / 2;
        var buffer = 200;
        
        if (contactCenter >= menuItemRect.top - buffer && contactCenter <= menuItemRect.bottom + buffer) {
          menuItem467.style.color = '#cd5124';
        } else {
          menuItem467.style.color = '#9c9288';
        }
      } else {
        menuItem467.style.color = '#545454';
      }
    }
    
    window.addEventListener('scroll', updateMenuItemColor);
    updateMenuItemColor();
  }
});
</script>
  <?php
}
add_action('wp_footer', 'custom_script', 99);

This script checks that your section ID “contact” on the homepage is within 200px of the center, if it is the menu item with be your highlight color: #cd5124;
If you then scroll up or down past 200px of the center the menu item will be your light menu color: #9c9288;
If you scroll all the way to the top the menu item will be the dark menu color: #545454;
This also works if you land on the “contact” section from another page.
Please clear your browser cache and check.

Best regards,
Mike

Hi,

Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard