Dante introduces some residual styling (see also: residual styling troubleshooting guide) which needs to be eliminated so that the theme’s menu styles don’t prevent UberMenu from functioning properly.

The Result

Here’s how UberMenu looks with Dante after executing the following steps:

Disabling Dante Mega Menu

The majority of the residual styling is easily removed by disabling Dante’s mega menu functionality.

Visit the Theme Options > General Options > Disable Mega Menu Functionality and enable this option

Aligning menu items to the right

To align the menu items to the right like the Dante default menu, follow the instructions to align all top level menu items to the right

Using the Dante search bar

If you want to use the Dante search bar, you’ll need to leave some space at the end of UberMenu for it, since it is absolutely positioned.

Add this custom CSS to make the search button usable and the logo clickable

#megaMenu.megaMenuHorizontal ul.megaMenu{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	padding-right:50px;
}
.header-container nav{
	z-index:40;
}
.header-container div#logo,
.header-container nav.search-nav{
	z-index:50;
}

Recommended Skin

The skin that works best with Dante is the “Vanilla” skin.

Responsive Menu

If you want to use UberMenu as your responsive menu, add this CSS:

#main-navigation{
	display:block !important;
}
.header-container #logo .mobile-menu-show{
	display:none !important;
}

To remove the theme’s responsive menu entirely, you could override the `sf_mobile_menu()` function in your child theme’s functions.php to prevent the extra menu from being printed.

function sf_mobile_menu() {}

Residual Styling

There is still some minor residual styling from the theme’s `id=”main-navigation”`. I have not noticed any side effects from this with Dante, however, if you need to eliminate the residual styling entirely you can override the `sf_header()` or `sf_main_menu()` function found in `sf-header.php` to alter the ID.