Add Bootstrap 4 Navwalker to Roots Sage 9

I had some trouble getting the Bootstrap 4 Navwalker into a new Sage Roots 9x theme. I tried the instructions seen on the navwalker page but kept getting errors and whitescreens. Eventually, here’s what I did to get it working:


1. Download the Bootstrap 4 Navwalker file and add it to the theme:

https://github.com/MWDelaney/sage-bootstrap4-navwalker

Be sure to add this inside the /app folder.


2. Include the file into Sage’s required files:

Inside /yourtheme/functions.php file (around lines 50-61), add ‘bootstrap4-navwalker’ into the list of files to load:

/**
 * Sage required files
 *
 * The mapped array determines the code library included in your theme.
 * Add or remove files to the array as needed. Supports child theme overrides.
 */
array_map(function ($file) use ($sage_error) {
    $file = "../app/{$file}.php";
    if (!locate_template($file, true, true)) {
        $sage_error(sprintf(__('Error locating %s for inclusion.', 'sage'), $file), 'File not found');
    }
}, ['helpers', 'setup', 'filters', 'admin', 'bootstrap4-navwalker']);

3. Include the navwalker into the menu: (in header.blade.php file)

@if (has_nav_menu('primary_navigation'))
    {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'container'=> false, 'menu_class' => 'nav nav-justified', 'walker' => new \App\wp_bootstrap4_navwalker()]) !!}
@endif

And that’s it. You will need to ensure this walker is added to any menu where you want the Bootstrap 4 walker to override.

Useful post? Share it

0 comments on “Add Bootstrap 4 Navwalker to Roots Sage 9

  1. Nice one Phil.
    Just joined the game at Sage 9, after being very happy in Sage 8 for a long time but decided it was time to jump in.
    Asides from getting to grips with Webpack,I wanted to customise the navwalker and create my class from it…
    Spent ages wondering why the hell it wouldnt recognise my class only to find this and realise the theme does all the include business for you and you need to add custom files to the import array ! ! !
    You sir are a blessing.

Leave a Reply

Your email address will not be published.