FlexForm (Swift Ideas)

FlexForm is a very nice theme from Swift Ideas. To make it work with UberMenu we just need to remove some of the extra menu capabilities it has built in and remove some residual styling to allow UberMenu to control the menu system.

This tutorial deals with implementing UberMenu in the Main Menu theme location.

Responsiveness & Styles

The main navigation is located in FlexForm’s header.php. It looks like this

						<!--// OPEN NAV SECTION //-->
						<div id="nav-section" class="<?php echo $nav_class; ?> span9 clearfix">
							<div class="nav-wrap clearfix">

								<!--// OPEN MAIN NAV //-->
								<a href="#" class="visible-phone show-menu"><?php _e("Select a page", "swiftframework"); ?><i class="icon-angle-down"></i></a>
								<nav id="main-navigation">

									<?php
									if(function_exists('wp_nav_menu')) {
									wp_nav_menu(array(
									'theme_location' => 'main_navigation',
									'fallback_cb' => ''
									)); }
									?>

								<!--// CLOSE MAIN NAV //-->
								</nav>

								<?php if ($enable_nav_search) { ?>

								<div id="nav-search">
									<a href="#" class="nav-search-link"><i class="icon-search"></i></a>
									<form method="get" action="<?php echo home_url(); ?>/">
										<input type="text" name="s" autocomplete="off" />
									</form>
								</div>

								<?php } ?>

							</div>
						<!--// CLOSE NAV SECTION //-->
						</div>

I recommend copying this header.php into your child theme to make the following edits:

Replace the entire menu markup with UberMenu Direct

<!--// OPEN NAV SECTION //-->
<div id="nav-section" class="<?php echo $nav_class; ?> span9 clearfix">
	<?php uberMenu_direct( 'main_navigation' ); ?>
<!--// CLOSE NAV SECTION //-->
</div>

This does two things:

1. It removes residual styling from the theme
2. It removes the responsive toggle button, which is superfluous once UberMenu is installed

FlexForm Search

If you wish to continue using the FlexForm Search bar, I recommend adding that code below UberMenu:

<!--// OPEN NAV SECTION //-->
<div id="nav-section" class="<?php echo $nav_class; ?> span9 clearfix">
	<?php uberMenu_direct( 'main_navigation' ); ?>
	<div id="nav-search">
		<a href="#" class="nav-search-link"><i class="icon-search"></i></a>
		<form method="get" action="<?php echo home_url(); ?>/">
			<input type="text" name="s" autocomplete="off" />
		</form>
	</div>
<!--// CLOSE NAV SECTION //-->
</div>

Then add this CSS to position the search box:

#megaMenu, #megaMenu-sticky-wrapper{
  position:relative;
  z-index:20;
}
#nav-search{
  position: absolute;
  right: 0;
  top: 0;
  margin: 5px;
  z-index: 30;
}
@media only screen and (max-width: 767px) {
  #nav-search{
    position:relative;
  }
}

Sticky Extension

If you’re using the Sticky Extension, you’ll want to disable the Mini-Header that is built into FlexForm so that it does not cover up UberMenu.

You can disable the Mini Header in FlexForm Options > Header Options > Mini header

If your menu collapses when you return to the top of the page, you may need to set an explicit width for your container.