Total (WPExplorer)

You can also check out this UberMenu Manual Integration Tutorial form WPExplorer

UberMenu integrates nicely with Total by WPExplorer (tested with default menu settings). Here are some configuration tweaks you can use to make UberMenu and Total look really good together. Here’s the result:

Recommended Skin

To match the Total style most closely, use the Vanilla skin.

Remove Header Search

Total injects a search button into the menu, which isn’t styled by UberMenu, so it looks bad. You can disable this and replace it with UberMenu’s search instead.

In Theme Options > Header > Header Search – Off

Menu Height

To get the menu items to be vertically centered within the header area, we need to adjust the menu height. In the Customizer, set UberMenu’s Top Level Vertical Padding to 42px. (You may need to tweak this depending on the height of your logo)

Right Aligned Menus with full width submenus

If you want your menu to be aligned right, but allow the submenu to stretch the entire width of the content area, do the following:

1. In the UberMenu Control Panel > Main UberMenu Configuration > Position & Layout > Menu Bar, set the Menu Bar Alignment to Right

2. In the UberMenu Control Panel > Main UberMenu Configuration > Position & Layout > Submenus, set Bound Submenu To to Unbounded

3. Add this CSS to the Desktop CSS Tweaks:

#site-navigation-wrap{
    width:100%;
    right:0;
}
.header-one #site-logo{
    position:relative;
    z-index:50;
}

Responsive Settings

By default, Total will replace UberMenu with a mobile menu. To use UberMenu as your mobile menu, do the following:

1. In the Total Theme Options > Responsive, set Mobile Menu Style to Toggle

2. In the Total Child Theme (Total provides a sample child theme which you can install), add this PHP in the functions.php

Current Version

WP Explorer Snippet

// Disable the Total Theme menu and mobile menu functions completely
function remove_total_actions() {
 
	// Remove mobile menu icons
	remove_action( 'wpex_hook_header_inner', 'wpex_mobile_menu_icons' );
	
	// Remove mobile menu alternative
	remove_action( 'wp_footer', 'wpex_mobile_menu_alt' );
	
	// Remove header menu (uncomment if you've integrated UberMenu via a hook)
	//remove_action( 'wpex_hook_header_inner', 'wpex_header_menu' );
	//remove_action( 'wpex_hook_header_top', 'wpex_header_menu' );
	//remove_action( 'wpex_hook_header_bottom', 'wpex_header_menu' );
	
}
add_action( 'init', 'remove_total_actions' );

Older Versions

function wpex_mobile_menu( $style = '' ){}

This will override Total’s mobile menu and remove it from the markup

3. Add this CSS in UberMenu’s Mobile CSS Tweaks to force the theme to show the menu on Mobile, align it nicely, and reduce the padding on the menu items:

#site-navigation-wrap {
  display: block !important;
  margin: 0;
  clear: both;
  float: none;
  position: relative;
  right: auto;
  padding: 20px 0;
}
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
  padding-top:15px;
  padding-bottom:15px;
}
#site-header{
    position:relative;
    z-index:40;
}
#main{
    position:relative;
    z-index:20;
}

The required CSS depends on your theme header configuration. Here’s a second example, with the toggle on the right of the logo:

#site-navigation-wrap {
  display: block !important;
  margin: 0;
  clear: both;
  float: none;
  position: absolute;
  left:0;
  right: auto;
  padding:0;
  width:100%;
  top:80px;
  height: auto;
  max-width: none;
}
.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main{
    position:absolute;
    right:0;
    width:auto;
    margin-top:-70px;
    font-size:25px;
}
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
  padding-top:15px;
  padding-bottom:15px;
}
#site-header{
    position:relative;
    z-index:40;
}
#main{
    position:relative;
    z-index:20;
}
#site-header-inner{
  position:static;
}

To disable the sticky header on mobile, add this CSS:


#site-header{
	position:relative !important;
}

UberMenu 3