Automatic integration with Jobify will wrap UberMenu in the theme’s menu, causing issues on mobile. To avoid this, we will use Manual Integration to prevent the theme’s menu from interfering.
Manual Integration
1. Create a child theme
You’ll want to make all of your changes in a child theme in order to preserve them when you update the Beaver Builder parent theme in the future
2. Copy the header.php into the child theme
Find your header.php
in the Jobify theme and copy it into your child theme. We’ll make the edits in the child theme’s header template.
3. Replace the theme’s menu system
In the child theme’s header.php
, conditionally replace the theme’s menu with UberMenu:
Before:
<nav id="site-navigation" class="site-primary-navigation slide-left"> <a href="#" class="primary-menu-toggle"><i class="icon-cancel-circled"></i> <span><?php _e( 'Close', 'jobify' ); ?></span></a> <?php get_search_form(); ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu-primary' ) ); ?> </nav> <?php if ( has_nav_menu( 'primary' ) ) : ?> <a href="#" class="primary-menu-toggle in-header"><i class="icon-menu"></i></a>
After:
<?php if( function_exists( 'ubermenu' ) ): ?> <?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?> <?php else: ?> <nav id="site-navigation" class="site-primary-navigation slide-left"> <a href="#" class="primary-menu-toggle"><i class="icon-cancel-circled"></i> <span><?php _e( 'Close', 'jobify' ); ?></span></a> <?php get_search_form(); ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu-primary' ) ); ?> </nav> <?php if ( has_nav_menu( 'primary' ) ) : ?> <a href="#" class="primary-menu-toggle in-header"><i class="icon-menu"></i></a> <?php endif; ?> <?php endif; ?>
Configuration
In the UberMenu Control Panel, you may want to:
– Set the Menu Bar Alignment to “Right”
– Change the skin to Vanilla
– Change the top level item color to #494949
– Change the top level font weight to bold
– Change the top level text transform to uppercase
These settings approximate the default theme menu