Canvas (WooThemes)

We’ll use Canvas’ hook system to replace the WooThemes nav with UberMenu and remove the mobile menu toggle. Please note the “putting it all together” section at the end.

Replace theme nav with UberMenu

This PHP unhooks the theme navigation and hooks in UberMenu using manual integration instead for the primary menu.

remove_action( 'woo_header_after','woo_nav', 10 );  // Remove Woo Nav
add_action( 'woo_header_after','ubermenu_integration_woo', 10 , 0 );   // Add UberMenu
function ubermenu_integration_woo(){
	ubermenu( 'main' , array( 'theme_location' => 'primary-menu' ) );
}

Remove the responsive toggle

This code unhooks the theme’s responsive toggle, since it is no longer needed.

remove_action( 'woo_header_before', 'woo_nav_toggle', 20 ); // remove Woo Nav toggle

Styling

To space the menu out a bit more, in your UberMenu Control Panel, set the Menu Bar Margin Bottom setting to 3em, or adjust as desired.

Putting it all together

Add this PHP to your (child theme’s) functions.php

function uberMenu_canvas_comaptible(){
	remove_action( 'woo_header_before', 'woo_nav_toggle', 20 ); // remove Woo Nav toggle
	remove_action( 'woo_header_after','woo_nav', 10 );  // Remove Woo Nav
	add_action( 'woo_header_after','ubermenu_integration_woo', 10 , 0 );   // Add UberMenu
	function ubermenu_integration_woo(){
		ubermenu( 'main' , array( 'theme_location' => 'primary-menu' ) );
	}
}
add_action( 'init' , 'uberMenu_canvas_comaptible' );

Note this is wrapped in an extra action to ensure that the code is executed after the parent theme code (if the actions aren’t registered prior to this code, calling remove_action won’t do anything).

Adjust your Menu Bar Margin Bottom setting to space the menu away from the site content.

Showing the top menu on mobile

Canvas moves the top menu into a sidebar menu along with the main menu on mobile; so that will be removed with the above integration. If you want to show the top menu on mobile, you can add this CSS in your CSS Tweaks

#top{
  display:block !important;
}
#top h3.top-menu{
  display:none;
}

Note that the Canvas menu won’t be collapsed on mobile, but you can replace the menu with an UberMenu using a secondary configuration if you want to collapse it.

UberMenu 3