Main Menu
Enfold’s menu styles will break UberMenu due to residual styling. First we’ll replace the theme’s menu with UberMenu to eliminate the residual styling. Then we’ll set up some configuration settings as well as add a few special styles.
Instructions for Enfold 4.1.3+
If you are using a current version of Enfold (any version 4.1.3 or later), Enfold has added a filter that makes integration much easier.
Manual Integration
You should always make theme changes in a child theme. To get started with a child theme, you can Download the Enfold Child Theme. Note that you will want to import the parent theme settings once you install the child theme as described in that article.
In your child theme’s functions.php, paste this code at the end of the file. Make sure it is before the closing ?> PHP tag, if you have one.
add_filter( 'avf_main_menu_nav' , 'um_enfold_menu' , 100 , 1 );
function um_enfold_menu( $menu ){
if( function_exists( 'ubermenu' ) ){
$menu = ubermenu( 'main' , array( 'theme_location' => 'avia' , 'echo' => false ) );
}
return $menu;
}
This code replaces the Enfold menu with UberMenu.
Remove the Enfold Search in functions.php
Since the Enfold search won’t be compatible, we’ll remove it by adding this code in the child theme functions.php. You can add in an UberMenu search bar instead. You may also be able to disable this in the settings, instead.
function remove_avia_search(){
remove_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );
}
add_action( 'init' , 'remove_avia_search' );
Special Settings and CSS
Suggested Skin
For the best similarity to the default Enfold styling, the Vanilla or Minimal Base skin is recommended.
Suggested Styles
These styles help the visual integration, though you may need to adjust them for your specific configuration, since there are many permutations of the Enfold header. These are just example styles, you may or may not need each for your specific setup, so we recommend testing them out.
.av_main_nav_header.av_menu_right #header_main .main_menu-uber{
clear:none;
z-index: 100;
line-height:30px;
height:100%;
margin:0;
float:right;
}
.av_main_nav_header.av_menu_left #header_main .main_menu-uber{
clear:none;
position: absolute;
z-index: 100;
line-height:30px;
height:100%;
margin:0;
left:0;
right:auto;
}
/* Menu left or right, slim */
.av_main_nav_header .main_menu-uber .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:36px;
padding-bottom:36px;
}
/* Menu left or right, large */
.av_main_nav_header.av_large .main_menu-uber .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:50px;
padding-bottom:50px;
}
/* Menu left or right, scrolled */
.av_main_nav_header.header-scrolled .main_menu-uber .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:14px;
padding-bottom:14px;
}
.ubermenu #menu-item-search{
display:none;
}
#header_main,
#header_main .main_menu-uber .ubermenu{
border-top:none;
}
#header_main_alternate{
display:block !important;
}
#header_main_alternate .main_menu-uber{
position:relative;
}
.av_bottom_nav_header #header_main,
.av_bottom_nav_header #header_main_alternate{
border-bottom:none;
}
@media screen and (max-width:999px){
#header_main .logo,
#header_main .main_menu-uber{
position:relative;
clear:both;
}
#header_main_alternate{
display:block !important;
}
#advanced_menu_toggle{
display:none !important;
}
}
/* Responsive Menu */
@media only screen and (max-width: 767px) {
.ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:15px !important;
padding-bottom:15px !important;
}
}
@media only screen and (max-width: 959px) {
.av_main_nav_header.av_menu_right #header_main .main_menu-uber{
position:relative;
}
.av_main_nav_header.av_menu_right .ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
padding-top:15px;
padding-bottom:15px;
}
}
Search
If you add a search bar to the menu, you’ll want to override the padding that Enfold is adding to form elements in general in the header
#top .ubermenu-searchform,
#top .ubermenu .ubermenu-search-input{
margin:0;
}
3. Configuration Recommendations
Menu Bar Alignment
In addition to setting your Enfold menu location, you will want to set the UberMenu Menu Bar Alignment. For the default position, set this to “Right”
Submenu Bounds
If you are using an alignment other than full width, you will likely want to unbound your submenus so that they can expand wider than your menu bar
4. Editing Tip
The Enfold Menu significantly alters the WordPress Menus Panel in Appearance > Menus. These changes can interfere with your ability to change the UberMenu settings. To disable Enfold’s customizations, you can enable the Disable Custom Menus Panel Walker setting in the UberMenu Control Panel > General Settings
Keep in mind, you may need to re-enable this if you are editing an Enfold-specific menu.
5. Results
Instructions for versions prior to 4.1.3 (click to reveal)
1. Manual Integration
To eliminate this residual styling, a change needs to be made in the helper-main-menu.php file to replace the theme’s menu with UberMenu.
Start by copying enfold/includes/helper-main-menu.php into a child theme (the path will be enfold-child/includes/helper-main-menu.php). Always make your changes in a child theme to preserve them when the parent theme is updated.
You can learn more about the Enfold child theme and download a starter child theme here: Download Enfold Child Theme. Note that you will want to import the parent theme settings once you install the child theme as described in that article.
We will replace the entire .main_menu block. Note that some of the theme-specific menu features will be removed, so you can add in the UberMenu versions afterwards.
Find this code around line 159
$output .= "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
$avia_theme_location = 'avia';
$avia_menu_class = $avia_theme_location . '-menu';
$args = array(
'theme_location' => $avia_theme_location,
'menu_id' => $avia_menu_class,
'menu_class' => 'menu av-main-nav',
'container_class' => $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
'fallback_cb' => 'avia_fallback_menu',
'echo' => false,
'walker' => new avia_responsive_mega_menu()
);
$main_nav = wp_nav_menu($args);
$output .= $main_nav;
/*
* Hook that can be used for plugins and theme extensions
*/
ob_start();
do_action('ava_inside_main_menu'); // todo: replace action with filter, might break user customizations
$output .= ob_get_clean();
if($icon_beside)
{
$output .= $icons;
}
$output .= '</nav>';
/*
* Hook that can be used for plugins and theme extensions
*/
ob_start();
do_action('ava_after_main_menu'); // todo: replace action with filter, might break user customizations
$output .= ob_get_clean();
Conditionally replace it with the UberMenu manual integration code like this:
if( function_exists( 'ubermenu' ) ){
$output.= ubermenu( 'main' , array( 'theme_location' => 'avia' , 'echo' => false ) );
}
else{
$output .= "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
$avia_theme_location = 'avia';
$avia_menu_class = $avia_theme_location . '-menu';
$args = array(
'theme_location' => $avia_theme_location,
'menu_id' => $avia_menu_class,
'menu_class' => 'menu av-main-nav',
'container_class' => $avia_menu_class.' av-main-nav-wrap'.$icon_beside,
'fallback_cb' => 'avia_fallback_menu',
'echo' => false,
'walker' => new avia_responsive_mega_menu()
);
$main_nav = wp_nav_menu($args);
$output .= $main_nav;
/*
* Hook that can be used for plugins and theme extensions
*/
ob_start();
do_action('ava_inside_main_menu'); // todo: replace action with filter, might break user customizations
$output .= ob_get_clean();
if($icon_beside)
{
$output .= $icons;
}
$output .= '</nav>';
/*
* Hook that can be used for plugins and theme extensions
*/
ob_start();
do_action('ava_after_main_menu'); // todo: replace action with filter, might break user customizations
$output .= ob_get_clean();
}
Remove the Enfold Search in functions.php
Since the Enfold search won’t be compatible, we’ll remove it. You can add in an UberMenu search bar instead.
function remove_avia_search(){
remove_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 );
}
add_action( 'init' , 'remove_avia_search' );
2. Styles
Suggested Skin
For the best similarity to the default Enfold styling, the Vanilla skin is recommended.
Suggested Styles in style.css
These styles help the visual integration, though you may need to adjust them for your specific configuration, since there are many permutations of the Enfold header
.av_main_nav_header.av_menu_right #header_main .main_menu-uber{
clear:none;
z-index: 100;
line-height:30px;
height:100%;
margin:0;
float:right;
}
.av_main_nav_header.av_menu_left #header_main .main_menu-uber{
clear:none;
position: absolute;
z-index: 100;
line-height:30px;
height:100%;
margin:0;
left:0;
right:auto;
}
/* Menu left or right, slim */
.av_main_nav_header .main_menu-uber .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:36px;
padding-bottom:36px;
}
/* Menu left or right, large */
.av_main_nav_header.av_large .main_menu-uber .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:50px;
padding-bottom:50px;
}
/* Menu left or right, scrolled */
.av_main_nav_header.header-scrolled .main_menu-uber .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:14px;
padding-bottom:14px;
}
.ubermenu #menu-item-search{
display:none;
}
#header_main,
#header_main .main_menu-uber .ubermenu{
border-top:none;
}
#header_main_alternate{
display:block !important;
}
#header_main_alternate .main_menu-uber{
position:relative;
}
.av_bottom_nav_header #header_main,
.av_bottom_nav_header #header_main_alternate{
border-bottom:none;
}
@media screen and (max-width:999px){
#header_main .logo,
#header_main .main_menu-uber{
position:relative;
clear:both;
}
#header_main_alternate{
display:block !important;
}
#advanced_menu_toggle{
display:none !important;
}
}
/* Responsive Menu */
@media only screen and (max-width: 767px) {
.ubermenu .ubermenu-item-level-0 > .ubermenu-target{
padding-top:15px !important;
padding-bottom:15px !important;
}
}
@media only screen and (max-width: 959px) {
.av_main_nav_header.av_menu_right #header_main .main_menu-uber{
position:relative;
}
.av_main_nav_header.av_menu_right .ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
padding-top:15px;
padding-bottom:15px;
}
}
Search
If you add a search bar to the menu, you’ll want to override the padding that Enfold is adding to form elements in general in the header
#top .ubermenu-searchform,
#top .ubermenu .ubermenu-search-input{
margin:0;
}
Hiding Enfold burger button
If you’re getting a burger button from Enfold on your mobile menu, you can hide it with this CSS:
.ubermenu .av-burger-menu-main{
display:none;
}
3. Configuration Recommendations
Menu Bar Alignment
In addition to setting your Enfold menu location, you will want to set the UberMenu Menu Bar Alignment. For the default position, set this to “Right”
Submenu Bounds
If you are using an alignment other than full width, you will likely want to unbound your submenus so that they can expand wider than your menu bar
4. Editing Tip
The Enfold Menu significantly alters the WordPress Menus Panel in Appearance > Menus. These changes can interfere with your ability to change the UberMenu settings. To disable Enfold’s customizations, you can enable the Disable Custom Menus Panel Walker setting in the UberMenu Control Panel > General Settings
Keep in mind, you may need to re-enable this if you are editing an Enfold-specific menu.
5. Results
Secondary Menu
If you want to use UberMenu in Enfold’s Secondary theme location, you will need to Manually Integrate UberMenu to prevent the theme from interfering with UberMenu in that theme location.
The edit can be made in the helper-main-menu.php template in your child theme (make sure to keep in in the /includes folder) and replacing the entire #header_meta with UberMenu. You can get the exact ubermenu() function from your Control Panel, and note that you may want to create a secondary UberMenu configuration to control this menu independently.
Here’s an example of the manual integration code replacement. This code assumes you have set up a configuration with the slug “secondary”. Please note that this is not the entire file, just the part you’re replacing
If you want, you can set an inner menu bar width and center it to set the menu items aligned to the edges of your content area.