Legenda (8theme)

Knowledgebase Docs » UberMenu 2 » Theme Integration
USEFUL? 0

When you activate UberMenu on Legenda out of the box, UberMenu will replace the fixed header menu, but the main menu and responsive menu will be the theme’s. Here’s how we can adjust that

The Main Menu & Fixed Menu

Legenda reuses the theme_location for both the fixed and main menus. Since UberMenu can only apply to one of these, it applies to the first one, resulting in the fixed menu becoming an UberMenu and the main menu remaining a theme menu.

There are a few options to handle this:

1. Main menu only, no fixed menu

If you don’t need the fixed menu, you can simply disable it. Then UberMenu will apply to the main menu instead.

Theme Options > General > Fixed navigation

2. Fixed theme menu, main UberMenu

If you want to keep the fixed theme menu, but use UberMenu as your main menu, just set the Theme Location Instance to 2 in the UberMenu settings. Then UberMenu will apply to the main menu but not the fixed menu.

Appearance > UberMenu > Advanced Settings > Theme Location Instance

3. UberMenu as both main & Sticky menu

To make UberMenu appear as both the main and fixed menu, we need to make a single instance of the menu both the main menu and fixed on scroll, rather than using two separate menus like the theme does.

To do this, we can use the UberMenu Sticky Extension.

You will want to disable the theme’s fixed nav

Theme Options > General > Fixed navigation

and make sure the Theme Location Instance is set to 1

Responsive/Mobile Menu

Out of the box, the mobile menu you see in Legenda will be the theme menu, as it hides UberMenu at mobile sizes.

The following CSS will force the theme to show UberMenu and hide the theme menu toggle:

/* Display UberMenu */
.main-nav.visible-desktop{
	display:block !important;
}
/* Hide theme menu toggle */
.menu-icon.hidden-desktop{
	display:none !important;
}

If you would like to remove the theme’s mobile menu entirely, you can remove this PHP from the header.php template:

Mobile menu line 51:

	<div class="mobile-nav side-block">
		<div class="close-mobile-nav close-block"><?php _e('Navigation', ETHEME_DOMAIN) ?></div>
		<?php 
			wp_nav_menu(array(
				'theme_location' => 'mobile-menu'
			)); 
		?>
	</div>

Mobile toggle line 222:

<div class="menu-icon hidden-desktop"><i class="icon-reorder"></i></div>