Navbar: if frontpage primary menu, else secondary menu

Goodmorning everyone,

I hope you are all doing fine today.

I am still working on the neverending story of my Full Page design but... we learn a lot !

But the very own nature of a full page design has a problem in it:

when on the frontpage, the Bootstrap Navbar uses the primary WordPress menu, which elements are #anchors. As soon as one navigates to a subpage however, those anchors don't work anymore, obviously.

My question is: where can I put some php-code in the Navbar (I presume) to check whether the current page is frontpage.php? The logic that I have for now:

<?php
  if (is_front_page()) {
          // navbar must load primary WordPress menu
         }
 else {
          // navbar  must load secondary WordPressmenu
         }
} ?>

I am also totally not sure where I should put that code.

Thanks for all your help !

kind regards,

Michael

  • Predrag Dubajic

    Hey Michael,

    Hope you're doing well today :slight_smile:

    What you can try is changing your anchor URLs to use full path to anchor instead just the anchor itself, so instead using #anchor use domain.com/#anchor, this way anchors will work on home page and from other page it will go to home page and scroll to your anchor.

    As for the using separate menus on different pages, menu is most likely located inside header.php file, however it does depend on the theme you're using.
    Menus are usually called by something like this:

    wp_nav_menu( array(
    	'theme_location' => 'primary',
    	'menu_class'     => 'primary-menu',
    ) );

    If you're making changes to your theme it's suggested to use child theme so your changes don't get overwritten by the theme update.

    Best regards,
    Predrag

  • Michael

    Hi all,

    when I use the solution offered above, and add the url to the anchor, the 'active' button doesn't add up anymore. Although that's only a design issue, I still keep looking for an alternative.

    And I found this:

    <?php
        $menu_slug = is_front_page() ? 'primary' : 'secondary';
    
         wp_nav_menu( array(
             'menu'              => $menu_slug,
             'theme_location'    => $menu_slug,
             'depth'             => 1,
             'container'         => 'nav',
             'container_class'   => 'navbar-collapse bs-navbar-collapse collapse',
             'container_id'      => 'bs-example-navbar-collapse-1',
             'menu_class'        => 'nav navbar-nav no-gutter cl-effect-4',
             'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
             'walker'            => new wp_bootstrap_navwalker())
         );
    ?>

    That might be the solution of course. I'll try it out.

  • Adam Czajczyk

    Hello Michael!

    The general idea to make it work like you described would be like this:

    1. Create two menus in WordPress backend (on "Appearance -> Menus" page)
    2. Set one of them as main menu; that would be the one that's currently shown on your site by default

    3. In case of most of the themes you would want to first create a basic child theme and then edit the "header.php" file looking for the code similar to this one:

    wp_nav_menu( array(
    	'theme_location' => 'primary',
    	'menu_class'     => 'primary-menu',
     ) );

    The 'theme_location' line here is the one that defines which menu should be called. The "catch" is it doesn't call out menu "by menu" but by location so it will always load the one that is assigned as a primary menu on "Appearance -> Menus" page in backend.

    That is fine for the homepage where you want that menu to be loaded however if it's not a homepage you want to load a different menu. Therefore the logic from your initial code seems to be correct. The first block should include menu code that's already in the "header.php" while the second one should call out another menu:

    <?php
      if (is_front_page()) {
            // the menu from the "primary" location, the one that's set as primary
             wp_nav_menu( array(
    	     'theme_location' => 'primary',
                 'menu_class'     => 'primary-menu',
            ) );
     }
     else {
            // the menu from the "secondary" location, the one that's set as primary
             wp_nav_menu( array(
    	     'theme_location' => 'secondary',
                 'menu_class'     => 'secondary-menu',
            ) );
             }
    } ?>

    That should as a result load "primary" menu if "is_front_page()" and load "secondary" menu in every other case.

    Now the question is whether you current theme supports multiple menu locations or not. If there's a "Manage Locations" tab available on "Appearacne -> Menus" page in your site's admin area and there's more than a single Theme Location available, that should work: simply assign menu that's going to be used on front page to the Primary Location and the other one to the Secondary location.

    If there's only a single location available you might need to add menu locations to your theme by adding a code like this to the "functions.php" file:

    function register_my_menus() {
      register_nav_menus(
        array(
        	'secondary' => __( 'Secondary' ),
        )
      );
    }
    add_action( 'init', 'register_my_menus' );

    That should add the "Secondary" location to the "Manage Locations" tab on "Appearance -> Menus" screen and let you assign it.

    If you are having troubles getting that to work or I'm missing the point, could you please:
    - point me to the site/pages where I could see the current menu(s) in action
    - grant me a support access to your site so I could see/check the theme and current configuration? You may enable access as described here:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.