Support Mega Menu for all the Header Builder Menu component

This document will help you with the mega menu for all the header builder menu component.

Till the last version of Astra & Astra Pro, megamenu only supports primary, secondary & menu-3 menus. As per the customer requirement to have mega menu support for multiple menus, we are providing here a filter provision. Users can place their menu name into this filter, and that menu will get mega menu support on the front end.

Have a glance at the attached filter for a better understanding.

Let’s say I want to have mega menu support for menu-3 & menu-4, so my updated filter will be –

add_filter( 'astra_nav_mega_menu_support', 'custom_megamenu_support', 10, 1 );
function custom_megamenu_support( $nav_menus ) {
	$nav_menus[] = 'menu_3';
	$nav_menus[] = 'menu_4';
	return $nav_menus;
}

Once you add the above attached mega menu code, when you have added a menu using the clone function and assign a mega menu to it, you will get double arrows for the mega menu items.

Here is how it works:

1. Clone the primary menu to create an additional menu and assign a mega menu to it.
2. The Mega menu links will automatically have two separate drop-down arrows.

For a better understanding, you can watch the below attached video.

That means double arrows showing for all additional menus like menu3, menu4 in the Header Builder. The issue was coming from the code we have used in the documentation. It will require some modification. So, you need to add the below-mentioned code by navigating to Customize > Additional CSS: 

#ast-hf-menu-3 .menu-text .dropdown-menu-toggle.ast-header-navigation-arrow {
display: none; 
}

Also, you can update the #ast-hf-menu-3 part by replacing the number as per your menu. For example, if you are using Menu 4, please replace the number with 4 and it will work.

We hope this helps. If you have any further queries, feel free to leave a comment below.