Integrating Ubermenu with Beaver Builder Theme

Hello, I am using Ubermenu with the BB Theme and everything works great. The Ubermenu hambuger shows for iPad sized devices but when it gets as small as an iphone then BB Theme shows the Menu button, I have to click that to show the Ubermenu hamburger and then have to click that. Is there a way to disable the BB Theme menu button and bar so that the Ubermenu hamburger continues to show?

thanks for any thoughts or ideas you might have, Chris

Hey Chris,

Are you able to share the site you are having this problem so we can check?

Ben

[Content Hidden]

Hey Chris,

I noticed you’ve already applied CSS hiding our menu and showing the ubermenu by default. That’s the only way to go for now but I’m going to have our lead dev check on this so the CSS won’t be needed. Thanks for heads up! :slight_smile:

Ben

yes, i just got the css from Chris Mavricos, developer of Ubermenu. here it is incase anyone else wants to use it:

.navbar-toggle{
display:none !important;
}
div.fl-page-nav-collapse{
height:auto !important;
display:block;
visibility:visible;
}

I don’t know if it is possible but it would be great to have you guys work with chris and integrate ubermenu into BB-Theme. I would make your amazing theme even better. His Ubermenu plugin has sold more than anything on Canyoncode, 46,000 sales, and for good reason.

Hey Chris,

Thanks for sharing the code! We definitely want our theme/plugin to be compatible with as much themes/plugins out there. :slight_smile:

Ben

With further help from Chris Mavricos, developer of Ubermenu, he assisted me in making the corrections to the child theme. I will put them here so maybe they will help others. I was using Nav Bottom in Header Layout.

The directory structure needs to match in the child theme - so the file needs to go in bb-theme-child/includes/nav-bottom.php

I have included the original nav-bottom.php, modified nav-bottom.php and just the specific code that was changed.

Here is the original code:

<header class=“fl-page-header fl-page-header-primary<?php FLTheme::header_classes(); ?>” itemscope=“itemscope” itemtype=“http://schema.org/WPHeader”>
<div class=“fl-page-header-wrap”>
<div class=“fl-page-header-container container”>
<div class=“fl-page-header-row row”>
<div class=“col-md-6 col-sm-6”>
<div class=“fl-page-header-logo” itemscope=“itemscope” itemtype=“http://schema.org/Organization”>
" itemprop=“url”><?php FLTheme::logo(); ?>
</div>
</div>
<div class=“col-md-6 col-sm-6”>
<div class=“fl-page-header-content”>
<?php FLTheme::header_content(); ?>
</div>
</div>
</div>
</div>
</div>
<div class=“fl-page-nav-wrap”>
<div class=“fl-page-nav-container container”>
<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' =&gt; 'header',
					'items_wrap' =&gt; '&lt;ul id="%1$s" class="nav navbar-nav %2$s"&gt;%3$s</ul>',
					'container' =&gt; false,
					'fallback_cb' =&gt; 'FLTheme::nav_menu_fallback'
				));

				FLTheme::nav_search();

				?&gt;
			&lt;/div&gt;
		&lt;/nav&gt;
	&lt;/div&gt;
&lt;/div&gt;

</header><!-- .fl-page-header -->

Here is the new code:

<header class=“fl-page-header fl-page-header-primary<?php FLTheme::header_classes(); ?>” itemscope=“itemscope” itemtype=“http://schema.org/WPHeader”>
<div class=“fl-page-header-wrap”>
<div class=“fl-page-header-container container”>
<div class=“fl-page-header-row row”>
<div class=“col-md-6 col-sm-6”>
<div class=“fl-page-header-logo” itemscope=“itemscope” itemtype=“http://schema.org/Organization”>
" itemprop=“url”><?php FLTheme::logo(); ?>
</div>
</div>
<div class=“col-md-6 col-sm-6”>
<div class=“fl-page-header-content”>
<?php FLTheme::header_content(); ?>
</div>
</div>
</div>
</div>
</div>
<div class=“fl-page-nav-wrap”>
<div class=“fl-page-nav-container container”>
<?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' =&gt; 'header',
					'items_wrap' =&gt; '&lt;ul id="%1$s" class="nav navbar-nav %2$s"&gt;%3$s</ul>',
					'container' =&gt; false,
					'fallback_cb' =&gt; 'FLTheme::nav_menu_fallback'
				));

				FLTheme::nav_search();

				?&gt;
			&lt;/div&gt;
		&lt;/nav&gt;
		&lt;?php endif; ?&gt;
	&lt;/div&gt;
&lt;/div&gt;

</header><!-- .fl-page-header -->

Here is the changed code:

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

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

				FLTheme::nav_search();

				?&gt;
			&lt;/div&gt;
		&lt;/nav&gt;
		&lt;?php endif; ?&gt;

Hey Chris,

This should remove our menu altogether when an Ubermenu menu titled main is present. Does this mean the previous CSS provided is no longer needed?

Edit: I mean the main menu on our header.

Ben

That is correct that the previous CSS is no longer needed.

Awesome! Thanks for sharing! :slight_smile:

Ben

I love UberMenu and Chris Mavricos gives awesome customer service, just like the BB team! I think it would be a match made in Heaven!

The other CSS piece that someone might need is to change the background of the area around the menu button that shows up with Ubermenu. Here is the CSS for that. Of course substituting your own colors.

/* make nav bar background and button area same color as regular nav bar /
/
navbar wrap /
.fl-page-nav-wrap{
background-color: #2A2A2A;
}
/
navbar-toggle /
.fl-page-nav .navbar-toggle{
background-color: #2A2A2A;
}
/
navbar toggle hover */
.fl-page-nav .navbar-toggle:hover{
background-color: #111111;
}