Fullwidth Submenu Active text Underlined

Hey hitrev,
Thank you for your patience and for the links, when I looked at your page the sub-menu items were not getting the “active-menu-item” class that the script you linked to was to add, but it did work when I injected it via the browser.
So I will assume that you will be adding this to your functions.php as it will be needed for the underline of the menu items when they reach the anchors.

function custom_script() { ?>
    <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_footer', 'custom_script');

Ok, so when I tested this I found that you had added the css for the gold background color:

.active-menu-item {
    background: gold!important
}

but as I understand you don’t want a background color but a white underline instead, so please replace with this:

#sub_menu1 #menu-main-menu .active-menu-item {
    display: inline-block;
    visibility: visible;
    border-bottom: 2px solid #fff;
    opacity: 1;
    padding-bottom: 6px;
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience and for the screencast, to add a menu item hover please try this css:

#sub_menu1 #menu-main-menu a:hover {
    display: inline-block;
    visibility: visible;
    border-bottom: 2px solid #fff;
    background: transparent !important;
    opacity: 1;
    padding-bottom: 6px;
}

I tested the scrolling issue and the jump occurs when the sub-menu position is changed from absolute to fixed, this is part of the script for the sticky sub-menu and this added script doesn’t programmatically affect this, it measures the height and distance of the element. I say “programmatically” but strange things can happen.
Anyways I stared at this for a long time scrolling up & down & reviewing your video, and I believe that this is based on the manual scroll speed. When I test with & without the script (on Chrome & Windows 10) if I scroll slowly the jump is almost not there and is the same with & without the script, but if I test quickly the jump really shows, but it seems to be the same with & without the script. I note that in your video the test without the script was slow, and the test with the script was fast.
So for me it was hard to be consistent manually scrolling, so I tested with this script which waits 2 seconds for the pages to load then scrolls down 1200px over 2 seconds, so it’s slow. I also adjusted the speed to 1 second so it was faster and 5 seconds so it was very slow. I did this with & without the script enabled, and in all cases the behavior was the same.
This was the test script if you would like to try in your your functions.php file:

function scroll_test_script() { ?>
    <script>
(function($) {
	setTimeout(function () {
	  $('html, body').animate({scrollTop: (1200)}, 2000);
}, 2000);
}(jQuery));
</script>
    <?php
}
add_action('wp_footer', 'scroll_test_script');

Please see the videos below.
So I guess I don’t really have a solution for you, but considering that the auto scroll test went so well perhaps there is a script to force a slower mouse wheel scroll, but perhaps that would just frustrate users?

Best regards,
Mike

Hi,
Thanks for the video, on hover the css above adds 8px, 2px for the border & 6px for the padding, so try adding this css to add the 8px so when you hover there is no change:

#sub_menu1 #menu-main-menu a {
    padding-bottom: 8px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I took a look at your page but didn’t find this css in your stylesheets or page source code, please check again.

#sub_menu1 #menu-main-menu a {
    padding-bottom: 8px;
}

Best regards,
Mike