UberMenu and Neighborhood actually work pretty well together out of the box – there is minimal conflict. There are several things this guide will seek to improve:

1. Unify UberMenu and Neighborhood’s menu bar items aesthetically
2. Improve responsive integration

Unifying the menu bar

Out of the box with all default settings, UberMenu integrated into Neighborhood will look like this:

It’s working properly, but the menu looks disjointed due to the black background on UberMenu’s menu bar and the white background on the Neighborhood bar.

Simplest solution

The simplest solution is to use the Vanilla skin that comes with UberMenu. Here’s the result after Changing the Menu Bar Height slightly with the CSS below

#megaMenu > ul.megaMenu > li.menu-item > a,
#megaMenu > ul.megaMenu > li.menu-item > span.um-anchoremulator{
    padding-top:14px;
    padding-bottom:14px;
}

Using a non-white menubar color

If you want a menu bar that isn’t white, the best option is to style the background of the theme’s menu bar and set the UberMenu menu bar to transparent.

Setting UberMenu’s menu bar to transparent

This part is easy. Add this CSS:

#megaMenu{
    background:none;
    border:none;
}
/* Removes item borders if any */
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  border-left:none !important;
}

Setting the Neighborhood menu bar background color

To set the background on the full width menu bar, use

#main-nav{
  background:#333;
}

Generally, you’ll want to change the background to the same or a similar color as that set on the #megaMenu element for that skin.

Keep in mind that the right side of the menu bar is not controlled by UberMenu, and is designed by the theme to be on a light background. If you intend to place it on a black background, you may want to customize the colors. This CSS will get you started customizing the theme:

#main-nav div.header-right ul.menu > li{
  border-left-color:#555;
}
#main-nav nav .menu > li > a,
#main-nav #menubar-controls a{
    color: #FFF;
}

Here’s how it might look:

Note that the cart icon is an image from the theme and can’t be altered with CSS

Responsive Menu

At mobile sizes, with Neighborhood + UberMenu, you’ll end up with a double-reveal menu effect.

So you have two choices: remove the Neighborhood menu button and only use UberMenu, or allow the Neighborhood menu button to reveal UberMenu entirely.

Using UberMenu Only

To use UberMenu only, add this CSS:

@media (max-width:767px){
    .show-main-nav{
        display:none !important;
    }
    #main-navigation{
        display:block !important;
    }
    #main-nav .span9{
    	margin-bottom:0;
    }
}

Neighborhood menu reveal

To use the Neighborhood button to reveal UberMenu, add this CSS:

@media (max-width:767px){

    #main-nav .span9{
    	margin-bottom:0;
    }

}

and disable the UberMenu toggle in the Control Panel

Here’s the result closed:

and open:

Sticky Menu

If you wish to use UberMenu’s Sticky Extension, first disable Neighborhood’s “Mini Header”

Then make sure to give UberMenu a background if it is transparent. You can do this through the UberMenu Sticky Control Panel:

or with custom CSS:

#megaMenu.ubermenu-sticky{
	/* Set to your preferred color */
	background:#222;
}