Beaver Builder Theme

If you are controlling your header via the Builder interface, follow the Builder Integration steps. If you are using the Beaver Builder Theme’s standard header, follow the Theme Template Integration steps.

Builder integration

The idea here is simply to replace the Beaver Builder menu module with UberMenu, via a shortcode.

1. Remove the existing Beaver Builder Menu module from the header layout

2. Add a Beaver Builder HTML Module into the layout where you want the menu to appear

3. Add the UberMenu Shortcode to the content of the HTML module

4. Save your settings

Theme template integration

Automatic integration with the Beaver Builder theme will result in UberMenu being wrapped in the theme’s menu system, which will cause issues on mobile. To avoid this, we’ll use Manual Integration to replace the theme’s menu system with UberMenu to prevent interference.

Manual Integration

1. Create a child theme

You’ll want to make all of your changes in a child theme in order to preserve them when you update the Beaver Builder parent theme in the future. The Beaver Builder Theme includes a child theme with your purchase that you can use. Install it like a normal theme, and activate it.

2. Find your navigation template

In the bb-theme/includes directory you will find several templates prefixed with nav- These files contain the theme’s navigation. Choose the one associated with the Beaver Builder Theme header layout you’re using – for example, if you have the Header Layout > Layout set to “Nav Bottom”, select the nav-bottom.php template.

Please note that if you are using the theme’s Sticky Header functionality, then you may also need to replace the theme’s menu in the fixed-header.php template to replace both the main menu and sticky header menu

3. Copy the template into the child theme

The file and directory must match, so first create an includes/ directory in your child theme. Then copy your nav template into your child theme. An example result would be: bb-theme-child/includes/nav-bottom.php

4. Replace the theme menu with UberMenu

In the nav template you copied into the child theme, find the theme’s menu, which will look like this:

<nav class="fl-page-nav navbar navbar-default" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".fl-page-nav-collapse">
		<span><?php FLTheme::nav_toggle_text(); ?></span>
	</button>
	<div class="fl-page-nav-collapse collapse navbar-collapse">
		<?php

		wp_nav_menu(array(
			'theme_location' => 'header',
			'items_wrap' => '<ul id="%1$s" class="nav navbar-nav %2$s">%3$s</ul>',
			'container' => false,
			'fallback_cb' => 'FLTheme::nav_menu_fallback'
		));

		FLTheme::nav_search();

		?>
	</div>
</nav>

Conditionally replace it with UberMenu, like this:

<?php if( function_exists( 'ubermenu' ) ): ?>
	<?php ubermenu( 'main' , array( 'theme_location' => 'header' ) ); ?>
<?php else: ?>
<nav class="fl-page-nav navbar navbar-default" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".fl-page-nav-collapse">
		<span><?php FLTheme::nav_toggle_text(); ?></span>
	</button>
	<div class="fl-page-nav-collapse collapse navbar-collapse">
		<?php

		wp_nav_menu(array(
			'theme_location' => 'header',
			'items_wrap' => '<ul id="%1$s" class="nav navbar-nav %2$s">%3$s</ul>',
			'container' => false,
			'fallback_cb' => 'FLTheme::nav_menu_fallback'
		));

		FLTheme::nav_search();

		?>
	</div>
</nav>
<?php endif; ?>

UberMenu will now be integrated into your theme and ready for use.

Custom CSS

Beaver Builder uses some CSS that includes the * selector, which means it matches with a lot of UberMenu elements where it shouldn’t. To overcome this, you can try adding some CSS like this in the CSS Tweaks:

.ubermenu.ubermenu-main *,
.ubermenu.ubermenu-main .ubermenu-target *,
.fl-page-header.fl-page-header-fixed .ubermenu.ubermenu-main .ubermenu-target *{
    color:inherit;
}

.ubermenu .ubermenu-retractor{
    color:#fff; /* Mobile submenu retractor text color */
}
.ubermenu-responsive-toggle .fa{
    color:#fff; /* icon color for responsive toggle */
}