Enfold (Kriesi)

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.

1. 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' );

2. 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

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.

UberMenu 3