Zerif Pro (Themeisle)

Zerif Pro will interfere with the mobile menu, so we need to use Manual Integration to replace the theme’s menu system with UberMenu

Manual Integration

Always make changes in a child theme to preserve them if you update the theme in the future

Replace the menu with UberMenu

Open the header.php and find the theme’s menu:

	<nav class="navbar-collapse bs-navbar-collapse collapse" role="navigation" id="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">

		<?php wp_nav_menu( array('theme_location' => 'primary', 'container' => false, 'menu_class' => 'nav navbar-nav navbar-right responsive-nav main-nav-list' ,'fallback_cb'     => 'zerif_wp_page_menu')); ?>

	</nav>

Conditionally replace it with the manual integration code like this:

<?php if( function_exists( 'ubermenu' ) ): ?>
	<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
	<nav class="navbar-collapse bs-navbar-collapse collapse" role="navigation" id="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">

		<?php wp_nav_menu( array('theme_location' => 'primary', 'container' => false, 'menu_class' => 'nav navbar-nav navbar-right responsive-nav main-nav-list' ,'fallback_cb'     => 'zerif_wp_page_menu')); ?>

	</nav>
<?php endif; ?>

Remove the mobile menu toggle

To remove the theme’s mobile menu toggle, conditionally disable this code in the header.php

<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

Like this:

<?php if( !function_exists( 'ubermenu' ) ): ?>
	<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">

	<span class="sr-only">Toggle navigation</span>

	<span class="icon-bar"></span>

	<span class="icon-bar"></span>

	<span class="icon-bar"></span>

	</button>
<?php endif; ?>

Truncated Submenus

If the submenus are being cut off on mobile by your theme, add this CSS to overcome that:

#main-nav.navbar{
	overflow:visible !important;
}

UberMenu Settings

The following settings are recommended to set in the Control Panel for the best fit with the Zerif Pro theme:

Menu Bar Alignment

Set the menu bar alignment to the right to position the menu beside the logo. Otherwise it’ll overlap if left on full width.

Top Margin

You can set a top margin to push the menu down a bit if you like

Bound Submenus To

You can set the submenu bounds to “Unbounded” to allow the submenu to expand beyond the width of the menu bar.

UberMenu 3