Twenty Twenty One

Twenty Twenty One will create residual styling on mobile by wrapping UberMenu inside its own menu, and add +/- buttons within the menu items which break the menu layout.

To resolve this, we will use manual integration to replace the theme’s menu with UberMenu, and remove the theme’s toggle button filter via a child theme.

Manual Integration & Button removal

1. Set up your child theme

If you haven’t already, install and activate your child theme. We will make changes here to preserve them when the parent theme is updated.

If you are not sure how to create a child theme, the Child Theme Configurator plugin is an easy way to generate one.

2. Copy the site-nav.php template into the child theme

In the child theme, create the following folder structure:

template-parts/header

Copy the template-parts/header/site-nav.php file from the parent theme into the same directory in the child theme.

3. Edit the nav template

Open the site-nav.php file that you just created in the child theme.

We’ll conditionally replace the entire #site-navigation block with the UberMenu manual integration code, like this:

<?php if( function_exists( 'ubermenu' ) ): ?>
    <?php ubermenu( 'main', array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
    <?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>">
            <div class="menu-button-container">
                <button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false">
                    <span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?>
                        <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
                    </span>
                    <span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?>
                        <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
                    </span>
                </button><!-- #primary-mobile-menu -->
            </div><!-- .menu-button-container -->
            <?php
            wp_nav_menu(
                array(
                    'theme_location'  => 'primary',
                    'menu_class'      => 'menu-wrapper',
                    'container_class' => 'primary-menu-container',
                    'items_wrap'      => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>',
                    'fallback_cb'     => false,
                )
            );
            ?>
        </nav><!-- #site-navigation -->
    <?php endif; ?>
<?php endif; ?>

4. Remove the toggle buttons filter

Twenty Twenty One injects extra markup into *every* menu to add the +/- buttons via a filter. Remove them by adding this PHP in your child theme’s functions.php file:

add_action( 'wp' , 'remove_2021_nav_button' );
function remove_2021_nav_button(){
    remove_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_sub_menu_toggle', 10, 4 );
}

Recommended Settings

Menu Alignment

To align the menu to the right of the site title, set the Menu Bar Alignment to Right in the Control Panel.

Because the theme uses a flexbox header, you may wish to add this CSS to align the menu to the right edge of the content area:

.ubermenu.ubermenu-main{
    margin-left:auto;
}

You may also wish to set the Bound Submenu To setting to Unbounded to allow the submenu to expand beyond the width of the menu bar.

To bound the submenu to the theme’s content area, you can add this CSS:

#masthead{
	position:relative;
}

Mobile Menu & Toggle Alignment

To align the mobile toggle to the right of the site title, set the Responsive Toggle Alignment to Right in the Control Panel.

To align it to the right edge of the content area, add

.ubermenu-responsive-toggle{
  margin-left:auto;
}

Switch the Mobile Menu Display Mode to Modal and Mobile Submenu Type to Accordion as described in the Mobile Menu Configuration guide