Current Menu Item in Full Width Sub Menu

Hey!

Please update the theme to the latest version (3.0.8).

Best regards,
Josue

Hey!

It doesn’t work because the fullwidth submenu items never get the current-menu-item class, this is more of a limitation with the current plugin we use for this (scrollSpy), try the following:

1. Open js/avia.js and change this line:

$('body').avia_scrollspy({target:'.main_menu .menu li > a'});

To:

$('body').avia_scrollspy({target:'.av-submenu-container .av-subnav-menu li > a'});

2. Also in js/avia.js change:

offset: (parseInt($('.html_header_sticky #main').data('scroll-offset'), 10)) + ($(".html_header_sticky #header_main_alternate").outerHeight()) + ($(".html_header_sticky.html_header_unstick_top_disabled #header_meta").outerHeight()) + 1 + parseInt($('html').css('margin-top'),10),

To:

offset: (parseInt($('.html_header_sticky #main').data('scroll-offset'), 10)) + ($(".av-submenu-container").outerHeight()) + ($(".html_header_sticky.html_header_unstick_top_disabled #header_meta").outerHeight()) + 1 + parseInt($('html').css('margin-top'),10),

Your second CSS code should be like this:

#top .av-subnav-menu > li.current-menu-item {
   background-color: transparent;
   border-bottom: 4px solid #d12a24;
} 

Cheers!
Josue

• This reply was modified 9 years, 2 months ago by Josue.

Hi,

Can you post the link to your website please?

Regards,
Josue

Hi!

To highlight the fullwidth submenu on same page while scrolling please add the below code to 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
}

Then add your own highlight style

/* Your css styles for active menu item*/
.current_page_item .avia-menu-text, .active-menu-item {
  background:gold!important;
}

Cheers!
Vinay Kashyap

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

Hi!

This line:

offset: (parseInt($('.html_header_sticky #main').data('scroll-offset'), 10)) + ($(".av-submenu-container").outerHeight()) + ($(".html_header_sticky.html_header_unstick_top_disabled #header_meta").outerHeight()) + 1 + parseInt($('html').css('margin-top'),10),

Change it to:

offset: (parseInt($('.html_header_sticky #main').data('scroll-offset'), 10)) + ($(".av-submenu-container").outerHeight()) + ($(".html_header_sticky.html_header_unstick_top_disabled #header_meta").outerHeight()) + 1 + 51 + parseInt($('html').css('margin-top'),10),

Cheers!
Josue

Hi,

Can you please create us a temporary FTP / SFTP account? post it here as a private reply.

Regards,
Josue

Hey!

Can you check it now? it seems to be working.

Note: i moved js/avia.js to the child theme install.

Cheers!
Josue

Hm, can you hand me a temporary WordPress Administrator access?

Regards,
Josue

Ok check it now, i added a fix using a menu item pointing to the previous section and hiding it with CSS.

Regards,
Josue

I didn’t modify any JS file, the fix was:
1. Add a new menu item pointing to the section before “itinerary”.
2. Hide this menu item with CSS (style.css).

Also, you don’t have to worry about updates because i moved the js files to your child theme.

Cheers!
Josue

De nada :)

Saludos,
Josue