Enfold Top Navigation Active Color State

Hi,

The active menu is highlighted correctly please check screenshot below. If you do not see the same please refresh the browser a few times and check again.

Best regards,
Vinay

Hi,

I checked all the main pages on your site but couldn’t find the fullwidth submenu. However you can follow these instructions

Please try adding this at the very end of your themes / child themes functions.php file:

//One page nav highlight

function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {
     var sections = jQuery('.avia-section'),
         menu   = jQuery('.av-submenu-container'),        
         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');

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

/* onepage nav active menu item*/
@media only screen and (min-width: 769px) {
.current_page_item .avia-menu-text, .active-menu-item {
  color: #b70e14!important;
}
}

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

.current-menu-item .avia-menu-fx {
      display: none;
}

.active-menu-item .avia-menu-fx {
      display: block!important;
    background-color: #c05f5f;
    border-color: #a03d3d;
    height: 2px;
    width: 100%;
    opacity: 1!important;
    visibility: visible;
}

If you still have any issues please provide a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Vinay

Hi,

I see that the fullwidth menu is highlighting correctly. If you like the main menu to highlight when a page in fullwidth menu is clicked then you need to make it a child page of the main menu item.

Example :

“Starters” is a child page of “Menu” so the Menu highlights when you select starter. Similarly make the rest of the pages the child page of it’s respective parent menu page.

let us know if you have any questions.

Best regards,
Vinay

Hi,

We need to hack it a bit for this to work. Go ahead and create submenus and hide them using the below css :)

.sub-menu {
display:none!important;
}

Best regards,
Vinay

Hi,

Highlight will not work if it’s not added as a child menu. But you can selectively hide the dropdown or submenus using css.

Best regards,
Vinay