Fullwidth Sub Menu Active Color

Hi!

We noticed the same issue as you mentioned. The menu linked to different color sections with ID is not highlighted when the section is active. Usually the menu gets an active class which makes it possible to target the current menu.

Please deactivate all plugins empty the browser cache and check for the issue and enable the plugins one by one to find out the plugin in conflict.

Regards,
Vinay

Hey!

We are working on your ticket please be patient we will update the results here soon.

The theme support highlighting of the main menu items to add the highlight menu feature to the secondary menu we will do the following.

1. Add unique ID’s and Class to each Color Section
2. Create new menu and add color section #ID’s to the menu items.
3. add a code block in wordpress functions.php
4. Add CSS styles for active menu in Enfold > General Styling > CSS

1.
Add a class name “one-page-nav” and unique section ID “section1” to each color section. These ID’s will be same for each menu item that we link to these sections.

2.
Add a menu in Appearance > Menu

Click on “Screen Options” on top right and select “CSS Classes”

Add unique section #ID’s as menu links and for the active menu add CSS class “active-menu-item” (add this class to the first menu item)

3.
Add the following in Appearance > Editor > functions.php

add_theme_support('avia_template_builder_custom_css');

function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {
     var sections = jQuery('.one-page-nav'),
         menu	= jQuery('#menu-onepagenav'),
            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');

4.

Add CSS styles in Enfold > General Styling > CSS

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

If you don’t see the options to add class please enable custom class options in the theme

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

Cheers!
Vinay

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

Hey!

Please follow the steps provided most of which you have already setup. In the above steps make sure the class names on your site match the class name and ID in the code above and add the extra js code block in functions.php and css in Quick CSS. You will have the menu working just like you want it.

Cheers!
Vinay