Login

UberMenu 3

Support CenterSubmit a Ticket

Jupiter (artbees)

This guide pertains to installing UberMenu with the default Jupiter theme, in the primary navigation location. Because Jupiter has so many different template permutations, it is possible that other configurations may require Manual Integration, but with the out-of-the-box theme configuration, I have not encountered any conflicts.

UberMenu works well out of the box with Jupiter (via Automatic Integration), but you’ll want to make some configuration adjustments in UberMenu to make things look nicer. This assumes you want the default right-aligned menu. Here’s what we’re aiming for:

Desktop Menu

1. Menu Alignment

If you are aligning the menu to the right of the logo, change UberMenu’s Menu Bar Alignment to Right. Because Jupiter’s logo is positioned absolutely, UberMenu will overlap the logo if set to full width.

2. Skin

Select your skin in the UberMenu Control Panel – the “Vanilla” skin matches the best for the default top level menu bar, and you can adjust your colors via the Customizer

3. Vertical Position

If you are positioning the menu to the right of the logo, to make the menu align vertically with the logo, increase the Vertical Padding via the Customizer. With the default logo, the appropriate padding would be 37px

4. Full content-width submenu

If you are positioning the menu to the right of the logo, expand the submenu beyond the menu bar in the Control Panel > Main UberMenu Configuration > Submenus > Bound Submenu To – Unbounded

5. Search icon position

Jupiter’s search button is not actually part of the menu, so it sits outside of UberMenu. To make it flow properly, you’d need to edit the order of the elements. If you want, you can just position it absolutely like this:

.ubermenu.ubermenu-main{
	padding-right:25px;
}
.main-nav-side-search{
	position:absolute;
	right:0px;
	top:-3px;
}

(Add it to the Desktop CSS Tweaks)

Or, you can just disable it and use UberMenu’s search dropdown instead.

If you are using the cart and search, another option is to leave the menu bar position set to full width and set the menu inline-block like this in the Desktop tweaks:

.ubermenu.ubermenu-main{
    display:inline-block !important;
}

6. Changing Colors

If you are using a transparent menu bar and therefore want to change the menu item color when the theme’s header background changes, you can add some custom CSS like this:

.transparent-header.light-skin .ubermenu .ubermenu-item-level-0 > .ubermenu-target,
.transparent-header.light-header-skin .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
    color:#fff;
}
.transparent-header.dark-skin .ubermenu .ubermenu-item-level-0 > .ubermenu-target,
.transparent-header.dark-header-skin .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
    color:#222;
}

The Result

Responsive Menu

1. Custom CSS

Jupiter will hide UberMenu by default on mobile. To display UberMenu instead, add this CSS in the Mobile CSS Tweaks:

/* Show UberMenu */
.mk-header-nav-container{
	display:block !important;
}
/* Position menu aligned with header */
.mk-header-nav-container{
	position:absolute;
}
/* Position menu toggle to the right and make larger */
.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main{
	float:right;
	padding:36px;
}
/* Give the top level items a background so they can be seen */
.ubermenu.ubermenu-main{
	background:#fff;  /* change this to your desired color, or remove if you've already set one */
	clear:both;
}
/* Reduce padding on top level menu items */
.ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
	padding-top:15px;
	padding-bottom:15px;
}
/* Hide unnecessary elements from the theme */
.mk-header-bg,
.main-nav-side-search,
#mk-header .mk-nav-responsive-link,
#mk-theme-container .mk-nav-responsive-link{
    display:none !important;
}
/* Raise the down arrow icon from the theme */
.mk-toolbar-resposnive-icon{
    z-index:300;
}
/* Raise the logo above the nav bar */
.mk-header-holder .header-logo{
    z-index:200;
    width:auto;
}

(Note this may need to be tweaked depending on your configuration)

You may also need to either increase your custom breakpoint to 1024, or add this CSS in the general CSS tweaks

/* Show UberMenu */
.mk-header-nav-container{
    display:block !important;
}
/* Hide unnecessary elements from the theme */
.mk-header-bg,
.main-nav-side-search,
#mk-header .mk-nav-responsive-link,
#mk-theme-container .mk-nav-responsive-link,
.shopping-cart-header{
    display:none !important;
}

Here’s the result:

Sticky Menu

If you need to change the color of the menu on a transparent header when the theme header becomes sticky, you can use some CSS like this:

.transparent-header.header-sticky-ready .ubermenu .ubermenu-item-level-0 > .ubermenu-target,
.transparent-header.a-sticky .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
    color:black;
}

On this page