Custom CSS in Color Section vs. in Column element

Hey!

We checked the page in question and everything seem to work fine however if you still have the issue

Here is a better version of the code to highlight the full width sub menu items and you don’t need to add different menu id’s either. make sure you remove the previous code and add the below code and link to different section it should work out of the box. (This is designed to work for color sections)

In situations where you cannot use color sections enable custom class support and add class “avia-section” to the ALB element even if it is a 1/1 section the script will work just fine :)

kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

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');

Regards,
Vinay Kashyap

Hey!

No you don’t have to do any thing other than setting up the ID’s in color section and menu items. I would like to take a closer look please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

Cheers!
Vinay Kashyap

Hey!

If you have a staging site i can set this up for you over there and you can then transfer the script to the live site.

Cheers!
Vinay Kashyap

Hi!

I tested this code on my installation it worked fine when i was trying it on your child theme the server is giving 500 error. Please post FTP access or remove the first block of code that say’s and let us know so we can continue the work.

//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');

Best regards,
Vinay Kashyap

Hi!

Thanks for that! We have setup the test page please check private content for the link.

We had to a color section since 1/1 sections cannot take an #ID.

We added the new code in functions.php and removed the old on as both were conflicting.

Added the below code in Quick css

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

Created a new menu from Appearance > menu > Test menu

Added a full width menu on page and selected > Test menu

Created a few color sections with #ID’s to link menu Items.

That’s it :)

this jQuery script will work for all full width menus without any edits and can be used in other projects easily.

Cheers!
Vinay Kashyap

Hey!

Sorry the sections like ¾ + ¼ cannot take custom #ID so you have to use a color section or instead use a Grid Row the one at the extreme right.
Using the grid row add your custom ID and Custom Class “avia-section”

This should fix the issue for you :)

Cheers!
Vinay Kashyap