Dropdown is not working

[asmsaiff]

See here - https://www.loom.com/share/886bec8379cb4f23b013a32f270a7fb0

[justinwyllie]

Come on. What drop-down is not working? What version of Bootstrap?

[asmsaiff]

Bootstrap 5 ofcourse

[justinwyllie]

What drop-down is not working? (I don't see the dropdown-toggle class when I do view source).

have you made the required changes (via the filter) for BS5?

[asmsaiff]

There has a dropdown toggle class but no ul>li for sub menu/dropdown as well. I've used this nav walker before in a bs4 project and it works well. But in this project made by bs5, I see the sub menu doesn't came up with walker and also I've used wordpress 5.9 (latest)

[IanDelMar]

@saifullahsiddique:

• Which version of the walker are you using?
• Would you please provide the array of arguments you pass to wp_nav_menu()?

[asmsaiff]

1. I'm using v4.3.0 of nav walker
2. Here is my array of arguments code I've passed to wp_nav_menu()

wp_nav_menu( array(
    'theme_location'        => 'primary-menu',
    'depth'                 => 1,
    'container'             => 'ul',
    'container_class'       => 'collapse navbar-collapse',
    'container_id'          => 'bs-example-navbar-collapse-1',
    'menu_class'            => 'navbar-nav ms-auto',
    'fallback_cb'           => 'WP_Bootstrap_Navwalker::fallback',
    'walker'                => new EduCare_Nav_Walker()
) );

Note: I've changed the classname with my theme name. That's why I've used EduCare_Nav_Walker() class name there.

[IanDelMar]

Try this

wp_nav_menu( array(
    'theme_location'        => 'primary-menu',
-   'depth'                 => 1,
+   'depth'                 => 2, 
    'container'             => 'ul',
    'container_class'       => 'collapse navbar-collapse',
    'container_id'          => 'bs-example-navbar-collapse-1',
    'menu_class'            => 'navbar-nav ms-auto',
    'fallback_cb'           => 'WP_Bootstrap_Navwalker::fallback',
    'walker'                => new EduCare_Nav_Walker()
) );

'depth' => 1 = no dropdowns, 'depth' => 2 = with dropdowns. There's a bug which causes the toggle to appear even if 'depth' => 1.

You should also change the fallback from 'WP_Bootstrap_Navwalker::fallback' to 'EduCare_Nav_Walker::fallback'.

[asmsaiff]

Still, It's not working.

https://www.loom.com/share/65dbd605a7194534b98b39b33d59fd12

[justinwyllie]

It looks like that tip about depth might fix it but if not - here is a debugging tip. wp_nav_menu seems to get the menu using these two functions:

 $menu = wp_get_nav_menu_object('menu-1');
 $menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) );
var_dump($menu_items);

So if you just run these ('menu-1' is obviously the name of your menu) anywhere in your code you should see in the output a menu structure which shows you have the child menu items. (They are linked with the menu_item_parent field: menu_item_parent points to the ID of the parent). So - if you see this then the error is in your code/integration with BS_Walker. If you don't then maybe WordPress is not correctly configured. (Either way it should tell you where the problem is).

[asmsaiff]

Thanks for your quote. I'll try again according to your suggestion and will let you know tommorow.

[IanDelMar]

I just checked with version 4.3.0 and Bootstrap 5. The dropdown is working. Can you please check the console for JS errors?

[justinwyllie]

I just checked with version 4.3.0 and Bootstrap 5. The dropdown is working. Can you please check the console for JS errors?

I think he is saying that the html for the submenu

is not even being output. So maybe there won't be anything in the console.

[IanDelMar]

@justinwyllie According to this https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues/534#issuecomment-1040206229 there is output now (after fixing the depth issue).

[justinwyllie]

Ah. Ok. I see. I hadn't seen the video. (Sorry everyone - they didn't work in Chrome for me).

I've compared the markup with my working case and I notice that my clickable link has an id on it and then the ul which is the dropdown menu has aria-labelledby by with the same id on it. This is missing the OP's case but I don't think this is critical.

Possibly more useful. If you right-click (in Chrome) on the menu element ( tag) which is the parent and then look at Event Listeners on the right hand side of the debugger you should be able to see that the event listener for the click event has been bound to it.

if this is missing that would suggest that bootstrap has not bound it as expected. If it is there I suggest putting a break point in that function and reloading the page - maybe this would give you a point to start debugging.

Also agree with IanDelMar about seeing if there are any errors in the console.

[IanDelMar]

In the video one can see the data-bs-toggle attribute. So I guess that's not the problem.

[asmsaiff]

This is the console. There is no error related this. May be I've to check this walker with another different project. I'll inform you after testing with another project @IanDelMar @justinwyllie

Thanks for your great support regarding this issue. Hope, we can solve this ASAP.

[asmsaiff]

I've checked it into my another project. But it still not working - https://www.loom.com/share/a4f7c5b325db4f08bec705ac8bb4bdd0

I don't know why. Thanks for your great support. I've to find another good solution for that. May be vanilla CSS or something other walker libraries instead of this one.

[IanDelMar]

@saifullahsiddique The denmed project is on Bootstrap 4? I see a data-toggle attribute instead of data-bs-toggle. I suspect that it is either an JS (Bootstrap script not loading at all) or CSS (missing styles for .dropdown-menu.show) issue. Would you post whatever is hooked to wp_enqueue_scripts?

[asmsaiff]

No. The DenMed is in Bootstrap v5.0.2

All of the CSS and JS has been enqueued properly and there is no problem with enqueue scripts and styles.

[asmsaiff]

Well, the dropdown is now working with another walker library I've found. Feeling fresh now.

I think you should update this walker with updated wordpress and bootstrap version and please make it compatible with all of the latest version as well. Best of luck.

[IanDelMar]

While I completely agree about updating the walker, it is working for me in a very minimalistic test theme (for both Bootstrap 4 and 5).

[asmsaiff]

Also you should focused on decreasing less lines of code. You wrote 608 lines of code for just this functionality, but it's not working for me. But I found a super lightweight walker library which is contains only 73 lines of code and It's working fine.

Best of luck, developers.

[pattonwebz]

Also you should focused on decreasing less lines of code. You wrote 608 lines of code for just this functionality, but it's not working for me. But I found a super lightweight walker library which is contains only 73 lines of code and It's working fine.

Best of luck, developers.

Glad you found something that works. I wrote much of this code a very long time ago and it certainly could be refactored and improved. You are welcome to open a PR that does that if you want :)

[qooglobal]

@saifullahsiddique I'm facing the same issue. Can you share the link to the library which worked for you? My problem is exactly the same as yours.

Thanks

[justinwyllie]

@saifullahsiddique - I don't think the OP ever resolved the issue he was having with this library. It seems he got it to output the html but the drop down didn't work. My guess would be because the JS wasn't loaded. As per my post above one way to check this is to see if the listener is bound correctly. Have you confirmed i) that you have the html output for the drop-down (and it is correctly marked up for the version of BS you are using) and ii) you have loaded the necessary JS? Of course using a library which 'works' is another option. (This one works well for me - so I think it can be got to work but of course there are alternatives).

[asmsaiff]

@qooglobal

https://github.com/asmsaiff/craftnce-agency-wordpress-theme/blob/master/lib/craftnce-nav-walker.php

Just copy the nav walker code from here and make a file in your project and paste it there. And then use this code for calling menu in the header -

wp_nav_menu(array(
    'theme_location'            =>  'primary-menu',
    'menu_class'                =>  '',
    'menu-container'            =>  'false',
    'fallback_cb'               => '__return_false',
    'items_wrap'                => '<ul id="%1$s" class="navbar-nav ms-auto mb-2 mb-lg-0 text-sm %2$s">%3$s</ul>',
    'depth'                     => 2,
    'walker'                    => new craftnce_wp_nav_menu_walker(),
));

[qooglobal]

Thanks, @saifullahsiddique.

I found one here which is working for me https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

[asmsaiff]

You're welcome.

[AkramAdil]

Hi, I had the same problem with Bootsraop 5 but I found the solution in Usage with Bootstrap 5 section in README.md, I just added the PHP code that solves data attributes problem.

[asmsaiff]

@AkramAdil Good to see. Thanks.

[rodrigobrgo]

Friends any current alternative to work the dropdown menu? I'm using Bootstrap version v5.2.3. The menu is working but the drop down is not, thank you!

[remon25]

@AkramAdil Good to see. Thanks.

thanks very much

[robwent]

My issue was that the navbar dropdowns require popper to work and I was just loading the Bootstrap js without it.

[leecollings-sb]

I've got exactly the same issue, dropdowns not working with v5. I tried using the v5.0.0 dev branch, but that just threw out loads of errors and I honestly had no idea how to make it work with the new structure... perhaps the readme needs updating?

I have all the markup as far as I can see, but the dropdowns don't show, the hash shows in the URL but that's it. I've used this walker on dozens of other sites which have worked.

Is there a released version of the walker for Bootstrap 5 yet that I haven't seen?

[IanDelMar]

I've got exactly the same issue, dropdowns not working with v5. I tried using the v5.0.0 dev branch, but that just threw out loads of errors and I honestly had no idea how to make it work with the new structure... perhaps the readme needs updating?

I have all the markup as far as I can see, but the dropdowns don't show, the hash shows in the URL but that's it. I've used this walker on dozens of other sites which have worked.

Is there a released version of the walker for Bootstrap 5 yet that I haven't seen?

If you share your markup and your filter, I can have a look.

I worked on a v5 of the Walker, but then didn't use the Walker myself for a while. That's why I never finished it. I'll give it another go when I find the time. Maybe over the Christmas holidays.

[leecollings-sb]

Hi Ian,

Sorry for the delay in replying, but I don't think I'm in need of extra help. I had a huge oversight and figured out that all that was needed was data-toggle needed changing to data-bs-toggle in the markup. That small change has made the v4.3.0 work now with Bootstrap 5.

[subrata6630]

Hi, Dropdown is not working. I used Bootstrap v5.3.3. Can you share the link to the library which worked for you? My problem is exactly the same as yours.

Thanks

[IanDelMar]

@subrata6630 Have you tried the filter as described in the readme?

add_filter( 'nav_menu_link_attributes', 'prefix_bs5_dropdown_data_attribute', 20, 3 );
/**
 * Use namespaced data attribute for Bootstrap's dropdown toggles.
 *
 * @param array    $atts HTML attributes applied to the item's `<a>` element.
 * @param WP_Post  $item The current menu item.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @return array
 */
function prefix_bs5_dropdown_data_attribute( $atts, $item, $args ) {
    if ( is_a( $args->walker, 'WP_Bootstrap_Navwalker' ) ) {
        if ( array_key_exists( 'data-toggle', $atts ) ) {
            unset( $atts['data-toggle'] );
            $atts['data-bs-toggle'] = 'dropdown';
        }
    }
    return $atts;
}

[asmsaiff]

Hi, Dropdown is not working. I used Bootstrap v5.3.3. Can you share the link to the library which worked for you? My problem is exactly the same as yours.

Thanks

Hello @subrata6630

I've tried this - https://github.com/asmsaiff/craftnce-agency-wordpress-theme/blob/master/lib/craftnce-nav-walker.php Also if it's not working for you, please check this - https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

I hope it'll work fine.