One page menu not highlight correctly to color section! URGENT!

Hey matgreat!

Thanks for getting in touch with us!

Could you please provide a link and login details to your site, so that we can have a closer look. You can place the information in the Private Content section of your reply.

Regards,
Jordan

Hey!

Was there any custom CSS added to the header? Like custom margin which is one of the reason this can happen. You can try removing the custom css and check if the issue resolve then add the css arguments one by one to know which one is causing the issue.

Regards,
Vinay

Hey!

This seems to be a bug as it is also happening on one of our demos using the one page scrolling http://kriesi.at/themes/enfold-one-page-portfolio/#services . We have reported this to our developers for a closer look.

Sorry for the inconvenience.

Best regards,
Jordan

Hi!

There are some steps that we need to check before custom coding to avoid conflicts and thank you for co-operating with us. However we could not re-produce this issue so we created a new custom script, disabled default styles and added custom styles for highlighting a menu.

//One page nav highlight
 
function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {
     var sections = jQuery('.avia-section'),
         menu   = jQuery('.avia-menu'),        
         nav_height = menu.outerHeight();
         jQuery(window).on('scroll', function() {
            var cur_pos = jQuery(this).scrollTop();
            sections.each(function() {
                var top = jQuery(this).offset().top - 300,
                    bottom = top + jQuery(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) {
                    menu.find('a').removeClass('active-menu-item');                    
                    menu.find('a[href="#' + jQuery(this).attr('id') + '"]').addClass('active-menu-item');
                }
            });
        });
    });
 
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

Below is the CSS we added in Enfold > General Styling > Quick CSS

/* active menu item*/
@media only screen and (min-width: 769px) {
.current_page_item .avia-menu-text, .active-menu-item {
  color: #b70e14!important;
}
.active-menu-item .avia-menu-fx {
            content: '';
            position: absolute;
            display:block!important;
            left: 50%;
            transform: translateX(-50%);
            bottom: .5em;
            height: 2px;
            width: -0;
            background: #b70e14!important;
            transition: all 0.3s ease;
            z-index:99999!important;
  }
}

/*remove default styles*/
.current-menu-item .avia-menu-text {
      color: #0a5476!important;
}
.current-menu-item .avia-menu-fx {
      display: none !important;
}

Please review the site now it should work fine :)

Cheers!
Vinay

• This reply was modified 8 years, 8 months ago by Vinay.