Current & Parent Menu Items In Menu

Hi Elias,

If I understand correctly, you need to go to Mega Menu > Menu Themes and enable “Highlight current item”.

Regards,
Tom

Hi Tom,

you are right for highlighting the current item or menu link. But as you can see here https://www.designchemical.com/lab/demo-wp-menu-css/parent-a/ the submenu is always visible as well.

I would like to achieve the same with Max Mega Menu and hope this is possible.

Elias

Hi Elias,

The official line is it’s not a supported feature.

Unofficially you could try adding this to your themes functions.php file:

function megamenu_keep_active_submenu_open( $classes, $item, $args ) {
    if ( ( in_array( 'mega-current_page_ancestor', $classes ) || ( in_array( 'mega-current_page_item', $classes ) || in_array( 'mega-current-menu-ancestor', $classes ) ) && in_array( 'mega-menu-item-has-children', $classes ) ) ) {
        $classes[] = 'mega-toggle-on';
    }

    return $classes;
}
add_filter( 'megamenu_nav_menu_css_class', 'megamenu_keep_active_submenu_open', 10, 3 );

Results may vary, it will only work in very specific circumstances (hence I can’t ever see it being a real feature of the plugin).

Regards,
Tom

Hi Tom,

Referring to the demo from the site of Elias, is it possible to have a flyout menus in top level and second/third level of sub-menu to use Mega menu? Because only the (top level) menu item can be created a panel for with Mega menus.

If it is feasible, how can it be created? I would like to create a menu like this:

image

Thanks in advance!

Regards,
Yee

Hi Tom,

thanks for your feedback and solution – which as you have said – only work in very specific circumstances.

However I’ve managed with pure CSS to display the submenus of active/current main menu links.

If anyone is looking for this here is the code.

#mega-menu-wrap-main_navigation #mega-menu-main_navigation li.mega-menu-item > ul.mega-sub-menu {
	display: none !important;
	visibility: hidden !important;
}

#mega-menu-wrap-main_navigation #mega-menu-main_navigation li.mega-current-menu-item > ul.mega-sub-menu,
#mega-menu-wrap-main_navigation #mega-menu-main_navigation li.mega-current-menu-ancestor > ul.mega-sub-menu {
	display: block !important;
	visibility: inherit !important;
}

#mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-current-menu-item > ul.mega-sub-menu > li.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-current-menu-ancestor > ul.mega-sub-menu > li.mega-current-menu-item > a.mega-menu-link {
	color: #white;
	font-weight: normal;
	text-decoration: none;
	background: #grey;

The only problem I still have is that the submenu is overlapping the content which I still have to figure out. Maybe you have an idea how to fix this?! —> https://nap.li/s/wxbmgaXiyd1rjDc (animated menu image)

Elias