Flatsome wraps the menu in a UL, which creates both residual styling (especially on mobile) and an HTML syntax error. To resolve this, we need to use Manual Integration
You should always make PHP customizations in a child theme in order to preserve them next time you update the theme
Current versions of Flatsome
Integrating the menu full width, below the logo
In recent versions of Flatsome, Flatsome has added a new setting which specifically integrates UberMenu in the full width below the logo position.
By default, this setting is enabled when UberMenu is active. When it is enabled, UberMenu will appear below your logo (no matter your other settings) unless you disable it.
So:
If you want UberMenu in that position, you should be able to leave that setting active and skip the integration below. Assign your menu to the “Main Menu” theme location. You may need to remove the “Menu” block from your Header Builder (Flatsome Theme Options > Header) to prevent it from displaying an extra menu.
If you want UberMenu to be beside the logo (or one of the other header layouts provided by Flatsome), then you’ll want to disable this setting in Flatsome > Advanced > Integrations > UberMenu and follow the next section of integration instructions to integrate UberMenu in the correct part of your Flatsome header.
Integrating the menu in a non-full width position
If you are using a header layout other than the full-width menu, choose an option below. This assumes you have already disabled the theme’s full width UberMenu integration via Flatsome > Advanced > Integrations > UberMenu.
You can integrate the menu with either the Header Builder or PHP code, depending on how you have your Flatsome configured.
Please note that we recommend using Flatsome’s mobile menu, but if you want to use UberMenu on mobile, you’ll want to manually integrate via PHP most likely.
Please note: Using the Header Builder option, Flatsome will still apply some residual styling to UberMenu, which interferes slightly with UberMenu’s styles. For most customers, this won’t be a big deal, so this is the simplest integration path. However, if you find the Flatsome styles are interfering in a negative way, please follow the PHP Code integration instructions (Option 2) to eliminate the theme interference entirely
Option 1: Using the Header Builder
In this strategy, we will replace the theme’s Menu block in the header to replace Flatsome’s menu with UberMenu.
1. Remove the theme’s Menu block from the Header Builder
Go to Flatsome > Theme Options > Header > Header Bottom.
You’ll see the Header Builder at the bottom of the Customizer screen
Remove the Main Menu block from the layout by dragging it to the bottom with the unused blocks.
2. Add UberMenu to the Header Builder layout
Take an unused HTML block, such as HTML2, and drag it into the layout where you want UberMenu to appear.
Click the gear on the HTML 2 block to open its settings on the left.
Paste the UberMenu shortcode inside the setting:
[ubermenu config_id="main" theme_location="primary"]
(You can also generate your own shortcode in the UberMenu Control Panel)
Click Publish to save your settings.
3. Hide the responsive toggle
At this point, Flatsome’s CSS will force the UberMenu Responsive Toggle to display.
Visit the UberMenu Control Panel > Main Configuration > Responsive & Mobile and switch the Responsive Toggle Tag to div
4. Expand the submenus full width
If you would like the submenus to be wider than the width of the menu bar, visit the UberMenu Control panel and set the Bound Submenu To setting to Unbounded
Flatsome will still bound the submenu to its own block container, so to overcome this, add this CSS in your Desktop CSS Tweaks:
.nav,
.nav .html{
position:static;
}
To bound your submenu to the theme’s content area, add this CSS:
.header .flex-row{
position:relative;
}
5. Disable UberMenu on mobile
First, tell Flatsome not to show your custom HTML block on mobile by going to the Customizer > Header > Header Mobile Menu / Overlay > Menu Elements and clicking they eye on the left of the HTML block so that it becomes faded
Next, make sure you have not enabled UberMenu on the Main Menu theme location
Now you will have UberMenu on desktop and your theme menu on mobile. Remember that you can only use UberMenu advanced items (like tabs, columns, etc) in UberMenu, not in theme menus. Flatsome allows you to assign a separate menu to the mobile menu if necessary.
Option 2: PHP code integration in template files
flatsome/template-parts/header/header-main.php
or
flatsome/template-parts/header/header-bottom.php
You’ll need to determine which template your menu is in – to do so, check the elements wrapping your menu on your site. If the menu is inside the #masthead div then it is in the header-main.php
If it is inside the #wide-nav div, then it is in the header-bottom.php
Copy whichever template your menu is in into your child theme – be sure to recreate/maintain the folder/path structure in the child theme.
Then find the code that looks like this in your template (there may be multiple instances – look for a ul with the nav class):
<ul class="header-nav header-nav-main nav nav-left <?php flatsome_nav_classes('main'); ?>" >
<?php flatsome_header_elements('header_elements_left'); ?>
</ul>
Depending on your Flatsome settings, the exact code may vary. Check that you’re looking at the right section by comparing the markup on the front end of your site:
Replace the appropriate block of code with UberMenu. For example, the Left Elements section would look like this:
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
<ul class="header-nav header-nav-main nav nav-left <?php flatsome_nav_classes('main'); ?>" >
<?php flatsome_header_elements('header_elements_left'); ?>
</ul>
<?php endif; ?>
If you are using a non-full-width menu, to bound the submenus to your content area, set your Bound Submenu To setting to “Unbounded” and add this CSS:
.header .flex-row{
position:relative;
}
Mobile Integration
Decide whether you want to use UberMenu or Flatsome’s menu on mobile and follow the relevant steps below.
Option 1: Flatsome’s mobile menu
If you want to use the Flatsome’s menu on mobile, just make sure you don’t activate the Main Menu and Main Menu – Mobile theme locations.
Bear in mind that the menu that you assign to that theme location cannot contain UberMenu advanced items, as those will only be processed by UberMenu.
You may also need to disable the “Responsive Toggle” setting in the UberMenu Control Panel if you still see UberMenu’s toggle on mobile when you only want to use the theme menu.
Option 2: UberMenu on mobile
If you want to use UberMenu on mobile, then we’ll hide the Flatsome toggle and make sure UberMenu is displaying.
If UberMenu’s toggle does not appear already
(If you already see the toggle on mobile, you can skip this part)
This should only happen if you manually integrated. In your manual integration code from the Desktop integration guide above, remove the “hide-for-medium” class that appears on the element wrapping the menu, and replace it with the “full-width-mobile-menu” class, for example:
<!-- CHANGE THIS: --> <div class="flex-col hide-for-medium flex-center"> <!-- TO THIS: --> <div class="flex-col full-width-mobile-menu flex-center">
Hide the theme menu’s toggle
Then add this CSS in the Mobile CSS Tweaks:
CSS to hide theme toggle:
.nav-icon{
display:none !important;
}
CSS to disable sticky header:
Note: as of UberMenu v3.7, you can enable the Modal Mobile Menu Display Mode and skip this code
.header-wrapper.stuck{
position:relative;
}
CSS to absolutely position UberMenu as a dropdown, useful if using the inline mobile mode but don’t want it to push down the content
/* This part should only be necessary if you're using a non-full-width menu layout in the theme header: */
div.full-width-mobile-menu .ubermenu{
position:absolute;
left:0;
width:100%;
background:white;
}
Older versions of Flatsome
Due to the nature of how this theme’s menu is coded, keep in mind that UberMenu will replace Flatsome’s menu system entirely, and theme-specific menu functions won’t be available – only those that you create in Appearance > Menus
Because the theme uses a jPanel mobile menu, which actually moves the placement of the menu in the DOM when the window resizes, compatibility with the existing menu becomes very difficult. This forces us to replace the menu entirely, to prevent the mobile menu from taking over.
Manual Integration
The header for Flatsome is somewhat redundant, and there are three instances of the menu, one of which will be used depending on which Main Navigation Position setting you set in the Flatsome option panel.
Full Width Menu
For the full width menu, which will be the most common, the section you’re looking for will begin with
<!-- Main navigation - Full width style -->
Because of how the theme’s mobile menu works, we’re forced to replace the entire theme navigation with UberMenu. So we replace this:
<!-- Main navigation - Full width style -->
<div class="wide-nav <?php echo $flatsome_opt['nav_position_color']; ?> <?php if($flatsome_opt['nav_position'] == 'bottom_center') {echo 'nav-center';} else {echo 'nav-left';} ?>">
<div class="row">
<div class="large-12 columns">
<div class="nav-wrapper">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if($flatsome_opt['search_pos'] == 'right' && $flatsome_opt['nav_position'] == 'bottom_center'){ ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search" onClick="return false;"></a>
<div class="nav-dropdown">
<?php if(function_exists('get_product_search_form')) {
get_product_search_form();
} else {
get_search_form();
} ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
<?php if($flatsome_opt['nav_position'] == 'bottom') { ?>
<div class="right hide-for-small">
<div class="wide-nav-right">
<div>
<?php echo do_shortcode($flatsome_opt['nav_position_text']); ?>
</div>
<?php if($flatsome_opt['search_pos'] == 'right'){ ?>
<div>
<?php if(function_exists('get_product_search_form')) {
get_product_search_form();
} else {
get_search_form();
} ?>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div><!-- .nav-wrapper -->
</div><!-- .large-12 -->
</div><!-- .row -->
</div><!-- .wide-nav -->
with this:
<?php if( function_exists( 'ubermenu' ) ): ?>
<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
<!-- Main navigation - Full width style -->
<div class="wide-nav <?php echo $flatsome_opt['nav_position_color']; ?> <?php if($flatsome_opt['nav_position'] == 'bottom_center') {echo 'nav-center';} else {echo 'nav-left';} ?>">
<div class="row">
<div class="large-12 columns">
<div class="nav-wrapper">
<ul id="site-navigation" class="header-nav">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '%3$s',
'depth' => 3,
'walker' => new FlatsomeNavDropdown
));
?>
<?php if($flatsome_opt['search_pos'] == 'right' && $flatsome_opt['nav_position'] == 'bottom_center'){ ?>
<li class="search-dropdown">
<a href="#" class="nav-top-link icon-search" onClick="return false;"></a>
<div class="nav-dropdown">
<?php if(function_exists('get_product_search_form')) {
get_product_search_form();
} else {
get_search_form();
} ?>
</div><!-- .nav-dropdown -->
</li><!-- .search-dropdown -->
<?php } ?>
<?php else: ?>
<li>Define your main navigation in <b>Apperance > Menus</b></li>
<?php endif; ?>
</ul>
<?php if($flatsome_opt['nav_position'] == 'bottom') { ?>
<div class="right hide-for-small">
<div class="wide-nav-right">
<div>
<?php echo do_shortcode($flatsome_opt['nav_position_text']); ?>
</div>
<?php if($flatsome_opt['search_pos'] == 'right'){ ?>
<div>
<?php if(function_exists('get_product_search_form')) {
get_product_search_form();
} else {
get_search_form();
} ?>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div><!-- .nav-wrapper -->
</div><!-- .large-12 -->
</div><!-- .row -->
</div><!-- .wide-nav -->
<?php endif; ?>
In the Control Panel, set the Menu Bar Alignment to “Center” and set the Menu Bar Width to 1080px.
Please note that this will remove certain theme menu features, like the search form. You’ll need to add a search bar to UberMenu instead, as this theme feature won’t be compatible with the menu.
Hide the theme’s mobile menu
Now that the theme’s mobile menu is no longer needed, we can hide the toggle by adding this CSS in the CSS Tweaks
#masthead .header-container .mobile-menu{
display:none !important;
}
Note that you could also disable the mobile menu in the theme.js file, but that’s not something that can be overridden in a child theme.
/* Install Responsive jPanel */
var jPM = $.jPanelMenu({
menu: '#site-navigation',
trigger: '.mobile-menu a',
animated: false,
afterOpen: function(){$('.mob-helper').addClass('active');},
afterClose: function(){ setTimeout(function(){$('.mob-helper').removeClass('active');}, 300);}
});
If you are using a menu other than the full width menu, you may need to adjust the theme’s mobile layout like this to display the mobile menu properly (in the Mobile CSS Tweaks)
#masthead .header-container{
padding-right:0;
}
#masthead .header-container .mobile-menu{
display:none !important;
}
#wrapper #masthead .left-links{
display:block !important;
clear:both;
max-width:100%;
min-width:100%;
width:100%;
}
#masthead #logo{
display:block;
margin-bottom:30px;
}
Results
