Branchy (TemplateMela)

Knowledgebase Docs » UberMenu 3
USEFUL? 3
UberMenu 3

Manual integration

To manually integrate UberMenu with Branchy, open the header.php and find the menu code:

<div class="topbar-main">
	<div id="navbar" class="header-bottom navbar default">
		<nav id="site-navigation" class="navigation main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'templatemela' ); ?></h3>
			    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'templatemela' ); ?>"><?php _e( 'Skip to content', 'templatemela' ); ?></a>	
			<div class="mega-menu">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' , 'menu_class' => 'mega') ); ?>
			</div>	
									
		</nav><!-- #site-navigation -->
		<?php if (is_active_sidebar('header-search')) : ?>
			<div class="header-search">
				<?php templatemela_get_widget('header-search');  ?>	
			</div>
		<?php endif; ?>	
	</div><!-- End header-bottom #navbar -->	
</div>

We want to conditionally replace this code with UberMenu:

<?php if( function_exists( 'ubermenu' ) ): ?>
  	<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
<div class="topbar-main">
	<div id="navbar" class="header-bottom navbar default">
		<nav id="site-navigation" class="navigation main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'templatemela' ); ?></h3>
			    <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'templatemela' ); ?>"><?php _e( 'Skip to content', 'templatemela' ); ?></a>	
			<div class="mega-menu">
				<?php wp_nav_menu( array( 'theme_location' => 'primary' , 'menu_class' => 'mega') ); ?>
			</div>	
									
		</nav><!-- #site-navigation -->
		<?php if (is_active_sidebar('header-search')) : ?>
			<div class="header-search">
				<?php templatemela_get_widget('header-search');  ?>	
			</div>
		<?php endif; ?>	
	</div><!-- End header-bottom #navbar -->	
</div>
<?php endif; ?>

Prevent the theme from altering the menu output

This theme uses string replacement to modify the output of the menu via a filter. Unfortunately, that garbles the markup and will result in part of the code being printed on the site.

This is the problematic code in megnor-functions.php

// Add first and last class to main menu
function templatemela_add_menu_first_last_class($output) {
  $output = preg_replace('/class="menu-item/', 'class="first-menu-item', $output, 1);
  $output = substr_replace($output, 'class="last-menu-item', strpos($output, 'class="menu-item'), strlen('class="menu-item'));
  return $output;
}
add_filter('wp_nav_menu', 'templatemela_add_menu_first_last_class');

To remove this filter, you can add this code to your child theme’s functions.php:

add_action( 'wp_head' , 'remove_menu_str_replace' );
function remove_menu_str_replace(){
	remove_filter( 'wp_nav_menu', 'templatemela_add_menu_first_last_class' );
}

Menu Centering

You’ll also want to enable the Center Inner Menu Bar setting in the Control Panel and set the inner menu bar’s max width to something like 1200px, to center your menu within the theme’s content area.