Beaver Builder Theme

Knowledgebase Docs » UberMenu 3
USEFUL? 10
UberMenu 3

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.

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 *{
    color:inherit;
}
.ubermenu .ubermenu-retractor{
    color:#fff; /* Mobile submenu retractor text color */
}
.ubermenu-responsive-toggle .fa{
    color:#fff; /* icon color for responsive toggle */
}