Ubermenu Manual Integration

Total should work pretty good by default with UberMenu when using the “Automatic Integration Theme Location”, however, for complete control and to prevent any sort of conflicts its best to use the built-in theme hooks to place your menu accordingly. You can use a child theme or the Total Tweaker plugin for this.

Step 1: Locate Manual Integration Code

First step is to setup your ubermenu and get your manual integration code.

Step 2: Locate the Theme Hook You Want To use

Total includes many hooks for use, open the file at Total/framework/hooks/hooks.php and it should be pretty obvious based on the names which hook you’ll want to use for your menu.

Recommended hooks:

The following hooks I would recommend using for adding the ubermenu to the site if your intention is to replace the default menu.

wpex_hook_header_before – To display above the header logo full-width
wpex_hook_header_top – To display above the header logo and menu boxed in
wpex_hook_header_inner – To display within the header boxed in (change priority to display above or below the logo)
wpex_hook_header_bottom – To display full-width below the header area

Don’t know what a hook is? If you don’t know what a hook is then you should probably hire a developer to help you or you need to go back to basics and learn what a hook is, because it’s a very very important and basic function in WordPress. Check out the theme guide to hooks here.

Step 3: Add Custom Function To Insert The UberMenu Code

This is an example function (which would go in your child theme’s functions.php file) showing you how to insert the mega menu into the appropriate hook.

// Below are 2 example functions on how to properly add your Uber Menu to the total theme.
// Only add 1 of the functions and tweak it accordingly, don't add both because you will of course get an error

// Add the uber menu to the 'wpex_hook_header_bottom' hook, this will add your menu below the logo in a full-width fashion
function my_add_uber_menu() { ?>
   <div class="myprefix-ubermenu-wrap container clr">
         59 )
        ); ?>
    </div><!-- .myprefix-ubermenu-wrap -->
 Add the Uber menu inside the header area if you wish to have it inline with the logo
function my_add_uber_menu() { ?>
   <div class="myprefix-ubermenu-wrap clr">
         59 )
        ); ?>
    </div><!-- .myprefix-ubermenu-wrap -->
<?php
}
add_action( 'wpex_hook_header_inner', 'my_add_uber_menu', 10 ); // Make sure to alter your priority accordingly if you want the code before or after the logo

Important: Notice that I added a div class with the "container" div? This is the main classname used by the theme for centering content on the site, without it the menu will span full-width but your items won't be centered. If you want your background from the menu to go 100% add a second wrapper around it and apply some custom CSS for it.

Result:

Below is the result you would get if you are using header style one and added the code above. The next step will show you how to completely remove the main menu from the header. For this specific menu style though you may want to consider using header style 2 or 3 so you can use the "Aside Content" in the header to place extra content in the header if you wish so you don't have a giant blank space to the right of the menu.

Important: This is a VERY simple result, of course once you tweak your UberMenu settings things will look much nicer than this!

Step 4: Disable the Built-in Menu and it's functions

You don't need to do anything extra to disable the theme's menu. All you need to do is remove the menu assignment from the "Main" menu under Appearance > Header > Menu Locations:

Last updated on July 16, 2024