Login

UberMenu 3

Support CenterSubmit a Ticket

ColorMag (ThemeGrill)

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

Manual Integration

Be sure to make all theme changes in a child theme in order to preserve them when you update the parent theme

Newer versions of ColorMag now provide a pluggable function that allows us to override the menu. So to do the integration we just need to open the child theme’s functions.php and add this PHP at the end:

if( function_exists( 'ubermenu' ) ):
function colormag_below_header_bar_display(){
  ubermenu( 'main' , array( 'theme_location' => 'primary' ) );
}
endif;

Instructions for old versions
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 1160px

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.

On this page