GeneratePress

Knowledgebase Docs » UberMenu 3
USEFUL? 9
UberMenu 3

The standard GeneratePress menu will cause residual styling and significant interference with UberMenu. The theme is nice and flexible, however, and provides a pluggable function that we can add to a child theme to easily replace the theme’s default menu.

This guide will walk you through integrating the menu manually in a child theme to replace the theme’s menu, then configuring the menu to align with the theme in the settings.

Manual Integration

1. First, create a child theme. If you don’t already have one, GeneratePress provides a starter child theme here: http://generatepress.com/api/themes/generatepress_child.zip

Install and activate the child theme.

2. Next, copy this PHP code and paste it into the child theme’s functions.php file:

/* Replace the theme's menu with UberMenu */
function generate_navigation_position(){
	if( function_exists( 'ubermenu' ) ){
		ubermenu( 'main' , array( 'theme_location' => 'primary' ) );
	}
}

/* Stop the theme from filtering the menu output */
add_action( 'wp_head' , 'stop_generatepress_menu_filter' );
function stop_generatepress_menu_filter(){
	remove_filter( 'walker_nav_menu_start_el', 'generate_nav_dropdown', 10, 4 );
}

The first function overrides the theme’s menu. The second part stops the theme from running a filter that adds an extra element to items with dropdowns, because the theme does not check that it is only adding this to its own menus.

That’s it, we’ve now overridden the theme’s menu. If you uninstall UberMenu in the future, remember to remove this code to revert to the theme menu.

Menu Configuration

The result of the manual integration will be that the menu will appear full-width on your site.

To center the menu, in the UberMenu Control Panel, enable the Center Inner Menu setting and set the Inner Menu Width to 1100px.

You may also want to set your submenu bounds to the inner menu bar, or else set up Rows

Then the inner menu will be centered with your content: