WP Residence (WP Estate)

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' );