Beaver Builder Theme

Knowledgebase Docs » UberMenu 3
USEFUL? 18
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.

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 */
}