Bootstrap Wordpress Navwalker responsive

Question

Hey all, I have been developing my first theme using roots/sage, wordpress, bootstrap 4, VVCW and the WP_Bootstrap_Navwalker for the menu. Also got a whole load of bootstrap stuff sitting in the bower components.

Everything is working and cool EXCEPT the menu is not responsive like it normally operates e.g the menu displays until it hits a certain width then the menu button appears which can be clicked and the nav drops down.

This is my code so far

//header.php

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="<?php echo home_url(); ?>">
        <?php bloginfo('name'); ?>
          </a>
    </div>
    </div>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-default',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav test',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
        );
        ?>
    </div>
</nav>

//function.php

require_once('lib/wp-bootstrap-navwalker.php');

function register_menus() {
    register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'Beatroute' ),
) );
  }
add_action( 'init', 'register_menus' );

function wpt_register_js() {
    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/bower_components/bootstrap/dist/js/bootstrap.js', 'jquery');
    wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );

function wpt_register_css() {
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/bower_components/bootstrap/dist/css/bootstrap.css' );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

I'm just wanting the regular functionality for BS menus to be present. I suspect there is something cooking with the grid-breakpoints. As this is the first custom theme I've developed using the Roots/Sage and assorted tech then figured there'd be something simple causing this.

Thanks for any help provided!

Answer 1

In Bootstrap 4 you have to define the navbar breakpoint explicitly. You do that by adding the class .navbar-expand{-sm|-md|-lg|-xl} (e.g.: .navbar-expand-md) next to your existing .navbar. This is mentioned first place at the Bootstrap Navbar documentation.

So I think the only alteration you have to make is this:

<nav class="navbar navbar-default navbar-expand-md" role="navigation">