These instructions are for older versions of Enfold. For the current version, see Enfold Integration Instructions
Enfold has two menus: Main and Secondary. There are separate instructions for each:
Main Menu
For the most part, UberMenu and Enfold work together very well out of the box. There are a few CSS tweaks we can add that will make them play even more nicely together.
Since Enfold has a few different menu settings that you can mix and match, we’ll take each style in turn. Pick the one you want to use and apply the prescribed CSS changes for optimal UberMenu + Enfold integration.
Note that Enfold contains a custom/custom.css file, so that is a good place to add any custom CSS.
Note for users intending to use the built-in Enfold search button, disable the Reset Div & Span Styling option in the UberMenu Control Panel > Theme Integration.
Recommended Skin
The recommended skin for Enfold is Vanilla. Any of the skins will function, and you can always use the Style Generator or write your own skin; but Vanilla looks the closest to Enfold’s menu out of the box.
Desktop Menus
Enfold offers several desktop menu styles under Enfold > Header > Header Type.
Depending on which Header Type you choose, you’ll want to do something a bit different with UberMenu.
Integration Type 1: Header with Social Icons and bottom Navigation
The last option is the easiest to sort out, and perhaps the most common layout for using a mega menu, so we’ll cover that first.
When you activate UberMenu, it’ll look like this:
You’ll see that the menu is compressed vertically because Enfold sets an explicit height on this menu. To resolve this, simply add:
.bottom_nav_header.social_header .main_menu #megaMenu{
height:auto;
}
and the issue is resolved.
Integration Type 2: Non-fixed Headers ( “Small non-fixed Header”, “Non-fixed Header with Social Icons and additional Navigation” )
With non-fixed menus, the issue is mainly that the UberMenu is not as tall as the standard Enfold menu. The best solution is to simply increase the height of UberMenu by adding padding.
Small Non-Fixed Header
For the small non-fixed header, add this CSS:
@media only screen and (min-width: 768px) {
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
padding-top:36px;
padding-bottom:35px;
}
}
The menu is now aligned properly.
Non-fixed header with Social Icons and additional Navigation
For this Header Type, we need a little additional padding to line everything up properly
@media only screen and (min-width: 768px) {
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
padding-top:50px;
padding-bottom:50px;
}
}
The menu is now aligned properly.
Integration Type 3: Fixed Headers (“Small fixed Header”,”Fixed Header with Social Icons and additional Navigation”)
The fixed header types are much tricker, since the header size changes and the menu items need to be centered vertically. Here’s one of the default menus:
And here’s what happens when we activate UberMenu:
UberMenu and Enfold are both still working perfectly – they’re just not really working together. The following CSS will make UberMenu function more like the Enfold menu so it integrates more seamlessly into the theme:
@media only screen and (min-width: 768px) {
/* Adopt Enfold's line height */
#megaMenu,
#megaMenu ul.megaMenu,
#megaMenu ul.megaMenu > li.menu-item,
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-item-depth-0 > a,
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-item-depth-0 > span.um-anchoremulator{
line-height:inherit;
height:inherit;
}
/* Display items as tables to allow for vertical centering */
#megaMenu ul.megaMenu > li.menu-item{
display: inline-table !important;
margin:0 !important;
padding:0 !important;
border-collapse:collapse !important;
border-spacing:0 !important;
}
/* Vertically center menu item contents */
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator,
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink{
padding-top:0;
padding-bottom:0;
display: table-cell !important;
vertical-align: middle;
border-collapse:collapse !important;
border-spacing:0 !important;
position:relative;
}
/* Align submenus properly relative to table */
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > ul.sub-menu.sub-menu-1{
top:100%;
left:0;
white-space:normal;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item{
vertical-align:top;
float:none;
}
/* Fix hover table shift */
#megaMenu ul.megaMenu > li.megaHover{
margin-right:-1px !important;
}
/* Set search dropdown to proper height */
#megaMenu .avia-search-tooltip{
top:100% !important;
background:white;
}
}
Here’s the result (switching to the Vanilla Preset)
and it even resizes properly while scrolling!
About dropdown arrows and cross browser compatibility
Sadly, FireFox does not support position:relative on table items, so we can’t use the drop down arrows properly. Therefore you can remove all the arrows completely (this is how Enfold looks by default):
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg > li.megaReg-with-sub > a::after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a::after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a::after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator::after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator::after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator::after{
display:none;
border:none !important;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item.megaReg-with-sub > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item.megaReg-with-sub > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a, #megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator{
padding-right:15px;
}
If you wanted, you could add some submenu indicators to the Navigation Labels like this instead:
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > * > span.wpmega-link-title{
position:relative;
padding-right:13px;
}
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > * > span.wpmega-link-title:after{
content:"";
position:absolute;
right:0;
top:5px;
border-top:4px solid #ddd;
border-left:4px solid transparent;
border-right:4px solid transparent;
border-bottom:none;
}
Widgets
If you are using widgets in your menu, you may need to add this CSS:
.bottom_nav_header.social_header .main_menu #megaMenu ul.um-sidebar{
height:auto !important;
}
#megaMenu ul.megaMenu li.ss-nav-menu-mega ul.sub-menu ul{
background:transparent;
}
Responsive/Mobile Menus
Next, we want to handle the mobile menus, as by default both UberMenu and Enfold’s menu will be displayed on mobile devices out of the box.
Choose whether you want to use UberMenu for your mobile menu, or either of Enfold’s included menus
Above: swapping mobile menu types in Enfold
Option 1: Using UberMenu Only
If you want to use UberMenu as your responsive menu:
- Set Responsive Header Main Menu to Display as Dropdown Menu
- Add this CSS to hide the Enfold menu:
.main_menu .mobileMenu{ display:none !important; }
And that’s it.
Option 2: Using the Enfold Dropdown menu (Selectbox)
To use the Dropdown menu and hide UberMenu, add this CSS:
/* Hide UberMenu */
@media only screen and (max-width: 767px) {
#megaMenu{
background:none;
border:none;
}
#megaMenu #megaMenuToggle{
display:none;
}
}
Option 3: Using the Enfold Slide Out Menu
To use the Slide Out Menu, we’ll hide UberMenu and then add a bit of extra CSS to the Slide Out Menu to accommodate the extra markup from UberMenu:
/* Hide UberMenu */
@media only screen and (max-width: 767px) {
#megaMenu{ display:none !important; }
}
/* Enfold sidebar menu */
#mobile-advanced li.menu-item span.um-anchoremulator {
padding: 13px 28px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #E1E1E1;
width: 100%;
display: block;
margin: 0;
text-decoration: none;
position: relative;
}
#mobile-advanced li > span.um-anchoremulator:before{
content: "\25B6";
position: absolute;
top: 13px;
margin-left: -10px;
font-family: 'entypo-fontello';
font-size: 7px;
}
#mobile-advanced li.menu-item ul.sub-menu{
display:block !important;
}
#mobile-advanced li.menu-item.ss-nav-menu-with-img{
vertical-align:top;
}
#mobile-advanced li.menu-item.ss-nav-menu-with-img img{
margin-right:5px;
vertical-align:middle;
}
#mobile-advanced li.menu-item.ss-nav-menu-with-img span.wpmega-link-title{
vertical-align:middle;
}
Secondary Menu
If you’re using a header with a secondary menu at the very top of the site, you’ll have some residual styling (see also: residual styling troubleshooting guide) to contend with.
A child theme with these changes is available at the bottom
Remove Residual Styling
Enfold wraps the secondary menu with nav tags, which cause residual styling on UberMenu. To remove this, we copy header.php to the child theme and adjust this code:
//display the small submenu
echo "<nav class='sub_menu' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";
$avia_theme_location = 'avia2';
$avia_menu_class = $avia_theme_location . '-menu';
$args = array(
'theme_location'=>$avia_theme_location,
'menu_id' =>$avia_menu_class,
'container_class' =>$avia_menu_class,
'fallback_cb' => '',
'container'=>'',
'echo' =>false
);
$nav = wp_nav_menu($args);
echo $nav;
$phone = avia_get_option('phone');
$phone_class = !empty($nav) ? "with_nav" : "";
if($phone) echo "<div class='phone-info {$phone_class}'><span>{$phone}</span></div>";
/*
* Hook that can be used for plugins and theme extensions (currently: the wpml language selector)
*/
do_action('avia_meta_header');
echo '</nav>';
to remove the nav tags and just display the menu normally.
wp_nav_menu( array( 'theme_location' => 'avia2' ) );
Styling
Next, you’ll want to add some CSS like this to make things fit well (don’t forget to switch to the Vanilla skin):
@media only screen and (min-width: 768px){
#top .social_bookmarks{
position:absolute;
}
#megaMenu.megaMenuHorizontal ul.megaMenu{
text-align:right;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item{
float:none;
vertical-align:top;
}
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
padding-top:8px;
padding-bottom:7px;
}
}
Here’s the end result (top menu):
