How to customize wordpress navigation menus

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.

Table of Contents

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.

Add a badge, icon, image to your menu

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.

Supported icon types

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

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.