ColorMag (ThemeGrill)

Knowledgebase Docs » UberMenu 3
USEFUL? 4
UberMenu 3

ColorMag requires Manual Integration to replace the theme’s menu system in order to prevent it from interfering with UberMenu.

Manual Integration

Make all theme changes in a child theme in order to preserve them when you update the parent theme

Copy the header.php into the child theme.

Find this code:

<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
	<div class="inner-wrap clearfix">
		<?php
   if ( get_theme_mod( 'colormag_home_icon_display', 0 ) == 1 ) {
      if ( is_front_page() ) {
         $home_icon_class = 'home-icon front_page_on';
      } else {
         $home_icon_class = 'home-icon';
      }
      ?>
      <div class="<?php echo $home_icon_class; ?>">
         <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><i class="fa fa-home"></i></a>
      </div>
      <?php
   }
   ?>
   <h4 class="menu-toggle"></h4>
   <?php
   if ( has_nav_menu( 'primary' ) ) {
      wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu-primary-container', 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>' ) );
   }
		else {
			wp_page_menu();
		}
		?>
   <?php if ( get_theme_mod( 'colormag_random_post_in_menu', 0 ) == 1 ) { ?>
      <?php colormag_random_post(); ?>
   <?php } ?>
   <?php if ( get_theme_mod( 'colormag_search_icon_in_menu', 0 ) == 1 ) { ?>
      <i class="fa fa-search search-top"></i>
      <div class="search-form-top">
         <?php get_search_form(); ?>
      </div>
   <?php } ?>
	</div>
</nav>

Conditionally replace it with UberMenu like this:

<?php if( function_exists( 'ubermenu' ) ): ?>
	<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>

	<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
		<div class="inner-wrap clearfix">
			<?php
       if ( get_theme_mod( 'colormag_home_icon_display', 0 ) == 1 ) {
          if ( is_front_page() ) {
             $home_icon_class = 'home-icon front_page_on';
          } else {
             $home_icon_class = 'home-icon';
          }
          ?>
          <div class="<?php echo $home_icon_class; ?>">
             <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><i class="fa fa-home"></i></a>
          </div>
          <?php
       }
       ?>
       <h4 class="menu-toggle"></h4>
       <?php
       if ( has_nav_menu( 'primary' ) ) {
          wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu-primary-container', 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>' ) );
       }
			else {
				wp_page_menu();
			}
			?>
       <?php if ( get_theme_mod( 'colormag_random_post_in_menu', 0 ) == 1 ) { ?>
          <?php colormag_random_post(); ?>
       <?php } ?>
       <?php if ( get_theme_mod( 'colormag_search_icon_in_menu', 0 ) == 1 ) { ?>
          <i class="fa fa-search search-top"></i>
          <div class="search-form-top">
             <?php get_search_form(); ?>
          </div>
       <?php } ?>
		</div>
	</nav>
<?php endif; ?>

Now the menu is integrated without interference from the theme

Menu Configuration

1. Center the inner menu

In the Control Panel > Main UberMenu Configuration > Position & Layout, check “Center Inner Menu Bar” and set the “Inner Menu Bar Width” to 1140px

2. Submenu Bounds

Change the “Bound Submenu To” setting to “Inner menu bar width” to keep the submenus aligned to the content area of your site.