Displaying primary nav menu two ways


Trying to modify the Twenty Twenty-One main menu. Given a main nav menu such as:

  • Name of organization (links to home page)
  • About
  • Etc…

For default behavior (on most pages other than home page), we need to replace the “name of organization” link with the site-branding logo as the link. Thus, visitor will see across top of page: [logo image linked to home page], then About link, etc.

The home page displays the nav differently, including the nav’s “name of organization” link & text, so for that page the name of organization link is still needed. For this purpose I have created a custom front-page-site-header.php based on site-header.php that removes the call to site-branding.php from the header (thus removing the logo from the nav).

I think the best way forward is to create a new menu just like the one above, but with no “name of organization” link, and set this menu as the primary. Then, the home page can call the old primary menu, but in place of

<?php get_template_part( 'template-parts/header/site-nav' ); ?>

, which is the call to retrieve the “primary menu”, I will create a custom copy of template-parts/header/site-nav.php in the child theme, modified to change the first link to the logo instead of the organization name.

^This is what I need help with. In the unmodified site-nav.php below:

<?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 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 ?>
            </button><!-- #primary-mobile-menu -->
        </div><!-- .menu-button-container -->
                '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; ?>

…I’m guessing I would have to add a call to the logo as a separate line above the call to wp_nav_menu(), but then wouldn’t it be outside of a surrounding the nav menu?

Thanks much for your insights.

Rickmakeitquick 4 months 2021-07-01T13:16:26-05:00 0 Answers 0 views 0

Leave an answer