Child Pages – Active Nav

[bnacht]

Hello, I have some pages built out that are not in the navigation. It seems that when I visit these pages the active nav link stays on the home page. It looks like even if I add a parent to these pages, the active nav link still won’t move to the parent page. Does anyone know how to accomplish getting the active nav to the right parent page?

[livemesh]

By default, if there is nothing selected or no menu item active, the lava lamp menu sticks to home since this being a single page theme, the user is expected to be on the home page by default. Even if there are additional pages, the theme assumes there is a navigation in the menu for that page to help user navigate to this page. I see issues with this approach when you are visiting certain pages like the categories or individual blog posts. Will have a look at this issue and fix it in the next update – should be out by early next week. Hope this helps.

Meanwhile, a few of the missing highlights can be addressed by making changes to the file js/main.js file at line number 57 and 60 from the current code (should be part of next update) –

            // make the parent of current page active for lavalamp highlight
            $('#primary-menu > ul > li.current_page_ancestor').first().addClass('active');

            // make the current page active for lavalamp highlight - top list cannot have both a parent and current page item
            $('#primary-menu > ul > li.current_page_item').first().addClass('active');

to

            // make the parent of current page active for lavalamp highlight
            $('#primary-menu > ul > li.current-menu-ancestor').first().addClass('active');

            // make the current page active for lavalamp highlight - top list cannot have both a parent and current page item
            $('#primary-menu > ul > li.current-menu-item').first().addClass('active');

[bnacht]

In my case, my secondary pages are not in the menu as sub-items. They are just child pages of the parent page. Will your recommendation still work or will that only highlight the parent page if the child page is in the nav as a sub-item?

[livemesh]

These classes are controlled and implemented in WP Core and are not controlled by the theme. If there is a limitation that you see with the current menu, it should be addressed by WP Menu implementation. The below documentation of WP Nav Menu indicates that it should get highlighted –

http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes

I did a test and looks like the the parent does get highlighted if it exists in the menu. For now, I would say try to have both conditions like this for best results –

            // make the parent of current page active for lavalamp highlight
            $('#primary-menu > ul > li.current-page-ancestor').first().addClass('active');

            // make the current page active for lavalamp highlight - top list cannot have both a parent and current page item
            $('#primary-menu > ul > li.current-page-item').first().addClass('active');

            // make the parent of current page active for lavalamp highlight
            $('#primary-menu > ul > li.current-menu-ancestor').first().addClass('active');

            // make the current page active for lavalamp highlight - top list cannot have both a parent and current page item
            $('#primary-menu > ul > li.current-menu-item').first().addClass('active');

The class active won’t be added twice by JQuery and hence should not hurt to have the above piece of code. Thanks

[Author]

Posts