Flatsome (UX Themes)

Knowledgebase Docs » UberMenu 3
USEFUL? 13
UberMenu 3

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 customizations in a child theme in order to preserve them next time you update the theme

New versions of Flatsome

Menu 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.

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.

Desktop Integration

First, your theme’s menu may appear in one of two files, depending on your Flatsome settings:

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

If you want to use the theme’s menu on mobile, just make sure you don’t activate the Main Menu – Mobile theme location

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.

If you want to use UberMenu on mobile, then in your manual integration code from the Desktop integration part, 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">

Then add this CSS in the Mobile CSS Tweaks:

.nav-icon{
	display:none !important;
}
.header-wrapper.stuck{
	position:relative;
}

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

This will show UberMenu on mobile. It also disables the sticky header so that the menu remains accessible.

Older versions of Flatsome

(If you are using an up-to-date version of Flatsome, you can ignore this section)

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