Genesis

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

As there are many Genesis child themes, this solution may vary among them. However, this technique is known to work with the default Genesis theme as of version 1.7. Similar strategies should work with alternate child themes, though specifics may vary with your child theme.

Update: In some versions of Genesis (either newer or with different child themes, you may not experience residual styling, but you may have a layering issue which is resolved by

.nav-primary{
	position:relative;
	z-index:20;
}
.site-inner{
	position:relative;
	z-index:10;
}

If submenus don’t open or the styling doesn’t look right

There are two issues when integrating with Genesis:

1. The submenus may be hidden. This is due to an overflow:hidden; on the #nav div
2. The submenus will not be styled properly out of the box. This is due to residual styling.

Both issues are resolved easily by changing the ID of the #nav div or removing the container entirely. Of course, we don’t want to edit the Genesis core directly, so we just use the Genesis filter system to update the menu display (add this code to your child theme’s functions.php file):

Primary Navigation Menu

/* Child Theme's functions.php */
add_filter( 'genesis_do_nav', 'genesis_child_nav', 10, 3 );
function genesis_child_nav($nav_output, $nav, $args){
    return $nav;
}

To accomplish the same thing with the submenu instead, you just need to change the filter (use this code instead of the above code):

Secondary (sub) navigation menu

add_filter( 'genesis_do_subnav', 'genesis_child_nav', 10, 3 );
function genesis_child_nav($nav_output, $nav, $args){
    return $nav;
}

Recentering the menu within the content area

You may also need to center your menu afterwards, depending on your child theme. You can do so either through the UberMenu Control Panel > Advanced Settings (don’t forget to Enable Clearfix as well as Center Menu Bar), or via custom CSS:

/* UberMenu Centering */
#megaMenu{
  max-width:100% !important;
  width:960px !important;
  margin:0 auto;
  float:none !important;
}
#megaMenu ul.megaMenu{
  float:none !important;
}
#megaMenu ul.megaMenu:before,
#megaMenu ul.megaMenu:after {
  content: "";
  display: table;
}
#megaMenu ul.megaMenu:after {
  clear: both;
}