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

The latest version of Enfold makes integrating UberMenu and Enfold a simpler process. It is recommended that if you have used the old integration guide, that you remove those styles and use the strategy recommended here instead

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, but the changes in the newest version make styling the menu in keeping with Enfold’s features simpler than in previous versions.

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.

Here’s the result of this guide:

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.

Recommended Styles

Enfold offers a variety of header options, and the following styles are provided to account for each of these options.

Remember to set the image width to your preferred size.

/* Set the width of the menu images */
#megaMenu .ss-nav-menu-with-img img{
  width:16px;
}

/* Menu left or right, slim */
.av_main_nav_header #megaMenu ul.megaMenu > li.menu-item > a, 
.av_main_nav_header #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:36px;
  padding-bottom:36px;
}

/* Menu left or right, large */
.av_main_nav_header.av_large #megaMenu ul.megaMenu > li.menu-item > a, 
.av_main_nav_header.av_large #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:50px;
  padding-bottom:50px;
}

/* Menu left or right, scrolled */
.av_main_nav_header.header-scrolled #megaMenu ul.megaMenu > li.menu-item > a, 
.av_main_nav_header.header-scrolled #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:14px;
  padding-bottom:14px;
}

/* Responsive Menu */
@media only screen and (max-width: 767px) {
	#megaMenu ul.megaMenu li.menu-item > a,
	#megaMenu ul.megaMenu li.menu-item > span.um-anchoremulator{
		padding-top:15px !important;
		padding-bottom:15px !important;
	}
}

Widgets

If you are using widgets in your menu, you may need to add this CSS:

#megaMenu ul.um-sidebar{
    height:auto !important;
}
#megaMenu ul.megaMenu li.ss-nav-menu-mega ul.sub-menu ul{
    background:transparent;
}

Mobile Menu

By default, Enfold will hide UberMenu and display the default Enfold mobile menu on mobile devices. You have several options if you don’t want to use the Enfold mobile menu:

Option 1: Use UberMenu, hide Enfold menu

To force UberMenu to display and hide Enfold’s mobile menu, you can add this CSS:

#header_main_alternate,
.main_menu,
.main_menu #megaMenu{
    display:block !important;
}
#advanced_menu_toggle,
#mobile-advanced{
	display:none !important;
}

This is the simplest solution, though optimally you would prevent Enfold from creating its mobile menu entirely. However, that would require editing the theme’s avia.js file to remove the avia_responsive_menu() function call. Ideally, Enfold would offer an option to disable the responsive menu for situations like this so we don’t expend the extra JS cycles on constructing a menu that won’t be used.

Option 2: Use ShiftNav

Another option would be to install ShiftNav, which would allow you to hide the theme’s responsive menu through the control panel by setting the selector to #advanced_menu_toggle, #mobile-advanced