Canvas (WooThemes)

Are you using UberMenu 3? Be sure to check out the UberMenu 3 Canvas Integration Guide

WooThemes has made some changes to Canvas in version 5.2.3. Since Canvas has an excellent hook system, we can swap out Woo’s nav menu for UberMenu with a few lines of PHP.

Canvas seems to integrate with minimal conflicts out of the box, but these instructions will clean up the navigation so they are recommended for all Canvas 5.2.3+ users. These instructions are especially important for users of the Sticky Extension; out of the box, Canvas’ residual styling breaks the sticky functionality.

Please note that these instructions apply to Canvas’s Primary Menu and not the Top Menu

Requirements

1. Canvas 5.2.3+
2. UberMenu 2.3+

Objectives

1. Replace WooThemes Primary navigation menu with UberMenu to remove residual styling
2. Remove WooTheme responsive navigation toggle button

Steps

Skip to solution

The optimal place to add the following PHP code snippets is in the functions.php file of a Canvas child theme. The final step includes all code in a single chunk that can be copied and pasted.

1. Replace Woo Nav with UberMenu

To do this we just need to swap out the function for the nav menu and define our own function to insert UberMenu instead. At the end, we’ll do this within the init action hook to ensure that the woo action is already added so we can remove it.

remove_action( 'woo_header_after','woo_nav', 10 );	// Remove Woo Nav
add_action( 'woo_header_after','uberMenu_direct_woo', 10 , 0 );	  // Add UberMenu
function uberMenu_direct_woo(){
	uberMenu_direct( 'primary-menu' );  //Actually do UberMenu insertion
}

2. Remove WooThemes Responsive Navigation toggle button

The WooThemes toggle button isn’t part of the normal menu (it’s actually in the header), so we need to remove that element separately.

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

3. Apply styles

Since we’ve removed the Woo nav classes to eliminate residual styling, we’ll need to add in a few styles to recreate the positioning/structure surrounding the menu. If you’re using a child theme as you should be, it makes sense to place these styles in the child theme’s style.css, but there are a variety of places to include custom CSS

#megaMenu{
  margin-bottom:3em;
}
#content{
  clear:both;
}

If you run into a z-index issue you can also add this code:

#megaMenu-sticky-wrapper,
#megaMenu{
  position:relative;
  z-index:20;    
}
#content{
  position:relative;
  z-index:10;    
}

4. Complete Solution: Putting it all together

To integrate UberMenu, you just need to copy two blocks of code into your child theme. We’ve wrapped the action functions inside a function that will be called at the init action hook in order to ensure these functions are called after Woo’s functions, which is critical.

Place this code in your functions.php

function uberMenu_canvas_comaptible(){
	remove_action( 'woo_header_after','woo_nav', 10 );	
	remove_action( 'woo_header_inside', 'woo_nav_toggle', 20 );
	remove_action( 'woo_header_before', 'woo_nav_toggle', 20 );
	add_action( 'woo_header_after','uberMenu_direct_woo', 10 , 0 );	
}
function uberMenu_direct_woo(){
	uberMenu_direct( 'primary-menu' );
}
add_action( 'init' , 'uberMenu_canvas_comaptible' );

Place this code in your child theme's style.css or UberMenu CSS Tweaks

#megaMenu{
  margin-bottom:3em;
}
#content{
  clear:both;
}

/* If you run into a z-index issue */
#megaMenu-sticky-wrapper,
#megaMenu{
  position:relative;
  z-index:20;    
}
#content{
  position:relative;
  z-index:10;    
}

Full Width Layout

Note: if you are using the Full-Width Layout, you will want to center the menu bar

In this case you may wish to set the Menu Bar Width to 980px and add

#content{
  margin-top:30px;
}

to your CSS