Sage Nav_walker appearing as ul not like bootstrap nav

[Tanuki]

Hello,
I’m starting with Sage trying to follow step by step from the book theme development with sage.
At navigation possibilities (page 95), I’m trying to use the nav walker from @MWDelaney,

I ran composer require “mwdelaney/sage-bootstrap4-navwalker” in the the theme directory.

My app.php file look like this

<?php

namespace App\Controllers;

use Sober\Controller\Controller;

class App extends Controller
{
    public function siteName()
    {
        return get_bloginfo('name');
    }

    public static function title()
    {
        if (is_home()) {
            if ($home = get_option('page_for_posts', true)) {
                return get_the_title($home);
            }
            return __('Latest Posts', 'sage');
        }
        if (is_archive()) {
            return get_the_archive_title();
        }
        if (is_search()) {
            return sprintf(__('Search Results for %s', 'sage'), get_search_query());
        }
        if (is_404()) {
            return __('Not Found', 'sage');
        }
        return get_the_title();
    }
    /**
     * Primary Nav Menu arguments
     * @return array
     */
    public function primarymenu()
    {
        $args = array(
        'theme_location'    => 'primary_navigation',
        'walker'            => new \App\wp_bootstrap4_navwalker()
        );
        return $args;
    }
}

and header.blade.php like so

<header class="banner">
  <div class="container">
    <a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
    <nav class="nav-primary">
      
      @if (has_nav_menu('primary_navigation'))
        {!! wp_nav_menu($primarymenu) !!}
      @endif
      
    </nav>
  </div>
</header>

I created a menu in wp dashboard and 3 custom links.

My page look like this

It’s just a ul but doesn’t look like a bootstrap 4 nav .

I’m clearly missing something.

What am I doing wrong or misunderstanding ?

[MWDelaney]

All the navwalker does is apply classes to the menu items. The rest of the Bootstrap Navbar HTML and CSS has to be added by you in the template or in sass.

[Tanuki]

Ok, I think I got it. I have to use https://developer.wordpress.org/reference/functions/wp_nav_menu/
and that is why there is the … in your code below theme_location.

Include the navwalker in your wp_nav_menu function:

wp_nav_menu( array(
‘menu’ => ‘primary’,
‘theme_location’ => ‘primary’,
…
‘walker’ => new wp_bootstrap4_navwalker())
);

and I have to get something like so

    {
        $args = array(
        'theme_location'    => 'primary_navigation',
        'container'       => 'div',
        'container_class' => 'collapse navbar-collapse',
        'container_id'  =>  'navbarNav',
        'items_wrap'    => '<ul class="navbar nav"><li class="nav-item"></li>%3$s</ul>',
        
        'depth' => '0',
        'walker'            => new \App\wp_bootstrap4_navwalker()
        );
        return $args;
    }
}

Understood.

Thank you for the reply.