Why is my Bootstrap 5 navbar not displaying the drop down menu on smaller screens?

I am trying to develop a bootstrap 5 theme for the latest WordPress. I am using Navwalker from here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker. My bootstrap Navbar does not dropdown on smaller screens.

Is it not working because I am using Bootstrap 5 and not bootstrap 4?

Here is my code from my header.php file:

nav class=navbar navbar-expand-md navbar-dark bg-dark role=navigation
    div class=container
        !-- Brand and toggle get grouped for better mobile display --
        button class=navbar-toggler type=button data-toggle=collapse data-target=#bs-example-navbar-collapse-1 aria-controls=bs-example-navbar-collapse-1 aria-expanded=false aria-label=?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?
            span class=navbar-toggler-icon/span
        /button
        a class=navbar-brand href=#Navbar/a
        ?php
        wp_nav_menu( array(
            'theme_location'    = 'primary',
            'depth'             = 2,
            'container'         = 'div',
            'container_class'   = 'collapse navbar-collapse',
            'container_id'      = 'bs-example-navbar-collapse-1',
            'menu_class'        = 'nav navbar-nav',
            'fallback_cb'       = 'WP_Bootstrap_Navwalker::fallback',
            'walker'            = new WP_Bootstrap_Navwalker(),
        ) );
        ?
    /div

/nav

Here is my code from my functions.php file:

function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

/*Navigation Menus*/
register_nav_menus( array(
    'primary' = __( 'Primary Menu', 'bootstrap' ),
    'secondary' = __( 'Secondary Menu', 'bootstrap' )
) );

        

This is my error:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'register_navwalker' not found or invalid function name in C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-includes\class-wp-hook.php on line 292

Call Stack

Time    Memory  Function    Location

1 0.0003 413560 {main}( ) ...\index.php:0

2 0.0006 413832 require( 'C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-blog-header.php' ) ...\index.php:17

3 0.0006 414376 require_once( 'C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-load.php' ) ...\wp-blog-header.php:13

4 0.0007 414816 require_once( 'C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-config.php' ) ...\wp-load.php:37

5 0.0007 419496 require_once( 'C:\Users\apiro\Local Sites\wordpressbootstraptheme\app\public\wp-settings.php' ) ...\wp-config.php:79

6 0.0325 2624792 do_action( ) ...\wp-settings.php:538

7 0.0325 2625168 WP_Hook-do_action( ) ...\plugin.php:484

8 0.0325 2625168 WP_Hook-apply_filters( ) ...\class-wp-hook.php:316

Topic twitter-bootstrap Wordpress

Category Web


You seem to have two distinct issues here.

  1. There is a section in the GitHub page you link to that states that the data attributes need to be amended for Bootstrap 5:

Bootstrap 5 uses namespaced data attributes. All data attributes now include bs as an infix. The new attributes work just like the old ones.

So as already stated, any attribute that starts data- will need to be changed to data-bs- instead.

This is actually created as a pull requested along with some other modifications for usage with Bootstrap 5: https://github.com/wp-bootstrap/wp-bootstrap-navwalker/pull/531

  1. The PHP warning could be made simpler by just including the required file from your functions.php file like so: include_once get_template_directory().'/class-wp-bootstrap-navwalker.php'; and removing the wrapping function and hook into after_setup_theme.

In nav walker class file, change all "data-" atrribute to "data-bs-"

Example: change "data-toggle" to "data-bs-toggle"

I fink have only one line to change ;)

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.