[Resolved] Different padding for menu items that have sumenus

[Peter]

Hi,

All menu items in the main menu have 20px left and right padding, except those main menu items that have sub-menus, they have 20px left and 0px right padding. The 0px right padding is not too nice for me.

I suppose that the reason of this is the following two parts of style.unmin.css.

Why is this styling difference between the menu items that have or have not sub-menus?
What is the best way to have 20px right margin for the main menu items that have sub-menus?

style.unmin.css:

.main-navigation .main-nav ul li.menu-item-has-children > a,
.secondary-navigation .main-nav ul li.menu-item-has-children > a {
	padding-right: 0;
	position: relative;
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .mobile-bar-items a {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 60px;
}

Thanks,
Peter

[Leo]

Hi Peter,

The padding for menu items with sub menu should be applied to the dropdown arrow:
https://s18.postimg.org/7t97y9teh/menu_padding.png

Have you hidden the dropdown arrow by any chance?

Let me know.

[Peter]

Hi Leo,

Thank you for the information.
You are right, the drop-down arrow is hidden on my site.

I have found a plugin conflict. The Menu Image plugin hides the GP drop-down arrow (https://wordpress.org/plugins/menu-image/).

If Menu Item plugin is active, then the problem occurs. There is not needed to set any menu image for any menu item, the drop-down is disappeared if that plugin is active without any special setting.

Can you see what causes the problem? GP theme or Menu Image plugin should be changed for solve this conflict?

Thanks,
Peter

[Leo]

So are you using any features from the plugin if you are adding an image?

I don’t think it’s causing by GP or the plugin – just that the plugin expects the user to insert an image if the plugin is activated.

We can take a look for sure if you can provide a link to your site? Thanks!

[Peter]

Our site is under development and is not available publicly at this moment, but this problem can be easily reproduced by installing and activating Menu Image plugin to any site.

I have looked at the appropriate code of GP themes (navigation.php), Menu Image plugin (menu-image.php) and WP core (class-walker-nav-menu.php), and find the reason of the problem, and suggest a solution.

In WP core nav_menu_item_title filter called first, then walker_nav_menu_start_el filter.
GP uses nav_menu_item_title filter, Menu Image plugin uses walker_nav_menu_start_el filter for changing menu items, and Menu Image plugin overwrites the GP drop-down arrows.

GP add the following code using nav_menu_item_title filter to add drop-down button:
$title = $title . '<span role="button" class="dropdown-menu-toggle" aria-expanded="false"></span>';
Thus the menu title text itself is supplemented by some html code, thus the title text and some html code is mixed, that causes the problem.

WP Core ensures a better solution to add HTML code to the menu items, adding arguments by nav_menu_item_args filter. The link_after argument is for adding any content after the menu item titles inside the … tag of the item.

You can see the usage of this kind of argument in class-walker-nav-menu.php file of WP Core:

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

The following code set an argument to add html code after the menu item instead of concatenating html to directly to the title. Using this solution other plugin cannot overwrite our modified menu item accidentally:

if ( ! function_exists( 'generate_dropdown_icon_to_menu_link' ) ) :
/**
 * Add dropdown icon if menu item has children.
 *
 * @since 1.3.42
 */
add_filter( 'nav_menu_item_args', 'generate_dropdown_icon_to_menu_link', 900, 3 ); // use high priority (900) to get menu drop-down at the very end of the menu item
function generate_dropdown_icon_to_menu_link( $args, $item, $depth ) {
	// Build an array with our theme location
	$theme_locations = array(
		'primary',
		'secondary',
		'slideout'
	);
	
	// Loop through our menu items and add our dropdown icons
	if ( in_array( $args->theme_location, apply_filters( 'generate_menu_arrow_theme_locations', $theme_locations ) ) ) {
		foreach ( $item->classes as $value ) {
			$dropdown_menu_toggle_out = '<span role="button" class="dropdown-menu-toggle" aria-expanded="false"></span>';
			if ( 'menu-item-has-children' === $value  ) {
				$args->link_after .= $dropdown_menu_toggle_out;
			} else {
				// remove dropdown_menu_toggle for eliminate this drawback of nav_menu_item_args filter: https://core.trac.wordpress.org/ticket/37344
				$args->link_after = str_replace($dropdown_menu_toggle_out, '', $args->link_after);
			}
		}
	}

	// Return our args
	return $args;
}
endif;

If you like this solution, I suggest to replace the original generate_dropdown_icon_to_menu_link function to this.

[Leo]

Wow thanks for this. I’ll ask Tom to have a look for sure 🙂

[Tom]

Thanks for the code, Peter!

If I remember correctly, the developer of the Menu Image plugin has the latest version on GitHub (https://github.com/zviryatko/menu-image) which doesn’t cause this conflict.

They just haven’t updated their repo yet (WP.org makes it really difficult to do so).

Either way I’ll be sure to study your code.

Thanks again!

[Peter]

Thank you for this information, Tom.
The actual Menu Item version on GitHub is working fine for me with GP.
I will use this Menu Item version, and I don’t need the solution that I supposed earlier.

[Tom]

No problem – hopefully the developer updates the WP repo soon 🙂

[Author]

Posts