How to customize wordpress navigation menu

Customize navigation menu is a new feature that gives you the ability to add elements that will give relief and interactivity to your menu by specifically pointing some of your entries that will quickly guide your users to recently modified pages/articles.
You can simply add a badge, an icon, an image or the thumbnail of the post.
These elements can be integrated into your menus while respecting the responsive design.

Enable navigation menu customization option

By default the feature is disabled. In the admin panel select EAC Components link WordPress tab then activate the option Customize nav menu and save settings.

Navigation menu activate option
Enable navigation menu option

Add a badge icon or image to menu items

To do this, go to ‘Appearance/Menus’, select the target menu and then unfold a menu item.
Click on the ‘Show fields’ button to open the popup and fill in the desired elements.
The content of the badge will be displayed after the title of the item and the other elements will be before.

Show fields button ton open the popup
Navigatio menu set fields popup
Popup fields

Supported icon types

Dashicons (WordPress core icons).
Elegant icons font (By elegantthemes.com)
Fonts Awesome (By awesome.com v5) displayed by categories.

Supported icon types

Filter the output

If you want to reuse your menu in a sidebar, footer widget or off-canvas menu from the distribution and you don’t want to display the newlies elements you added, you have to use this filter in your child theme’s functions.php file.

/** Sidebar  */
add_filter( 'eac_menu_item_class', function( $classes ) {
	$classes[] = 'hide-sidebar';
	return $classes;
} );

/** Footer  */
add_filter( 'eac_menu_item_class', function( $classes ) {
	$classes[] = 'hide-footer';
	return $classes;
} );

/** Off-canvas  */
add_filter( 'eac_menu_item_class', function( $classes ) {
	$classes[] = 'hide-canvas';
	return $classes;
} );

Compatible themes

Customize Navigation Menu works with most of the themes out there, especially with popular ones like Twenty Seventeen, GeneratePress, OceanWP, WP Newspaper, Astra, Hueman…
Make sure that your active theme is using the default walker for displaying the nav menu.
If it’s using its own custom walker, make sure that the theme implements the nav_menu_item_title filter well (please consult your theme author about this).
For example, this is not the case for the theme Hestia which will not display the elements you have entered.

Leave a Comment