CODEWITHSUNDEEP
javascriptwordpressmenudropdown
Argyris K.
Argyris K.

Reputation: 11

navbar dropdown and collapse not working[wordpress + bootstrap]

I am using bootstrap nav walker for my WordPress website but the dropdown is not showing up or collapse dont working

//bootstrap wp navbar code

    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a href="#" class="navbar-brand"><?php bloginfo('name'); ?></a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            
            <div class="navbar-nav ml-auto">
            <?php
wp_nav_menu( array(
    'menu'              => 'primary',
    'theme_location'    => 'primary',
    'depth'             => 3,
    'container'         => 'div',
    'container_id'      => 'navbarNavDropdown',
    '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>
        </div>
    </nav>

//Functions php file

    <?php
// Register Nav Walker Class_alias
require_once('wp-bootstrap-navwalker.php');

//Theme support
function wpb_theme_setup() {
    //nav menu
    register_nav_menus(array(

        'primary' => __('Primary Menu')
    ));
}

add_action('after_setup_theme', 'wpb_theme_setup');

Upvotes: 1

Views: 1433

Answers (2)

moaz studio استديو معاذ
moaz studio استديو معاذ

Reputation: 21

first: go to class-wp-bootstrap-navwalker.php file

looking for $atts['data-toggle'] ="dropdown";

replace it by $atts['data-bs-toggle'] ="dropdown";

Upvotes: 1

Argyris K.
Argyris K.

Reputation: 11

The problem was because i try to load bootstrap css from footer.php

i try to include in function.php file with this code

function abc_load_my_scripts() {
  wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'));
  wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'));
  wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'abc_load_my_scripts', 999);

Upvotes: 0

Related Questions