WP Residence creates residual styling, so we’ll use Manual Integration to replace the theme’s menu with UberMenu to prevent the theme from interfering.
Manual Integration
1. Create a child theme
Remember to create a child theme where we’ll make all the changes in order to preserve them for when the parent theme is updated.
2. Copy header.php
Copy the parent theme’s header.php
into the child theme where we’ll make the changes.
3. Integrating the menu
In the child theme’s header.php
, find the following PHP:
<nav id="access"> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #access -->
this is the theme’s menu system. We’ll conditionally replace it with UberMenu like this:
<?php if( function_exists( 'ubermenu' ) ): ?> <?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?> <?php else: ?> <nav id="access"> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #access --> <?php endif; ?>
Control Panel Configuration
Once the menu has been integrated, you’ll likely want to configure some additional settings to set up the menu as desired.
1. Menu Bar Alignment
Set the menu bar alignment to “Right”
2. Submenu Bounds
Set the Bound Submenu To setting to “Unbounded” to allow the submenus to expand beyond the menu bar.
3. Skin
The Vanilla skin works well if you want to try to match the original menu style. You can change the top level item color to a darker color and set the font size to 15px in the Customizer if you like.
4. Menu bar height – sticky and desktop
Since the menu needs different heights when sticky and non-sticky, we’ll write some custom CSS. Add this CSS in the Desktop CSS Tweaks:
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target { padding-top: 35px; padding-bottom: 35px; } .navbar-fixed-top .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target { padding-top: 24px; padding-bottom: 24px; }
Mobile Menu
To hide the theme’s mobile toggle, add this CSS:
.mobile-trigger{ display:none; }
(or you can remove it in the theme template as well)
You can also conditionally disable the theme’s mobile menu to save some processing, since it’s no longer necessary on line 75 of header.php
if( !function_exists( 'ubermenu' ) ) get_template_part('templates/mobile_menu' );