Dropdown is not working #534

asmsaiff · 2022-02-15T05:22:34Z

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

justinwyllie · 2022-02-15T08:11:10Z

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

asmsaiff · 2022-02-15T08:13:38Z

Bootstrap 5 ofcourse

justinwyllie · 2022-02-15T08:15:53Z

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 · 2022-02-15T08:21:31Z

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 · 2022-02-15T09:21:36Z

@saifullahsiddique:

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

asmsaiff · 2022-02-15T11:45:21Z

I'm using v4.3.0 of nav walker
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 · 2022-02-15T11:54:06Z

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 · 2022-02-15T12:19:09Z

Still, It's not working.

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

justinwyllie · 2022-02-15T12:20:11Z

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 · 2022-02-15T13:35:38Z

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

IanDelMar · 2022-02-15T15:24:25Z

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 · 2022-02-15T16:06:29Z

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 · 2022-02-15T16:19:45Z

@justinwyllie According to this #534 (comment) there is output now (after fixing the depth issue).

justinwyllie · 2022-02-15T16:54:08Z

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 · 2022-02-15T17:02:53Z

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

asmsaiff · 2022-02-16T04:52:28Z

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 · 2022-02-16T09:55:14Z

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 · 2022-02-16T10:11:46Z

@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 · 2022-02-16T10:22:10Z

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 · 2022-02-16T10:24:38Z

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 · 2022-02-16T11:09:22Z

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 · 2022-02-16T12:04:25Z

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 · 2022-02-16T12:17:04Z

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 · 2022-03-15T11:37:36Z

@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 · 2022-03-15T11:48:42Z

@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 · 2022-03-15T13:02:50Z

@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 · 2022-03-15T13:15:35Z

Thanks, @saifullahsiddique.

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

asmsaiff · 2022-03-15T13:24:43Z

You're welcome.

AkramAdil · 2022-08-16T09:22:00Z

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 · 2022-08-19T12:56:31Z

@AkramAdil Good to see. Thanks.

rodrigobrgo · 2023-04-12T21:24:30Z

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 · 2023-07-19T20:21:10Z

@AkramAdil Good to see. Thanks.

thanks very much

robwent · 2023-11-08T11:48:19Z

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

leecollings-sb · 2023-11-09T09:12:58Z

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 · 2023-11-09T11:31:24Z

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 · 2023-11-10T09:07:25Z

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 · 2024-08-21T15:03:35Z

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 · 2024-08-21T16:51:33Z

@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 · 2024-08-22T07:23:28Z

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.

Dropdown is not working #534

Dropdown is not working #534

Comments

asmsaiff commented Feb 15, 2022

justinwyllie commented Feb 15, 2022

asmsaiff commented Feb 15, 2022

justinwyllie commented Feb 15, 2022

asmsaiff commented Feb 15, 2022

IanDelMar commented Feb 15, 2022

asmsaiff commented Feb 15, 2022

IanDelMar commented Feb 15, 2022 • edited Loading

asmsaiff commented Feb 15, 2022

justinwyllie commented Feb 15, 2022 • edited Loading

asmsaiff commented Feb 15, 2022

IanDelMar commented Feb 15, 2022

justinwyllie commented Feb 15, 2022

IanDelMar commented Feb 15, 2022

justinwyllie commented Feb 15, 2022 • edited Loading

IanDelMar commented Feb 15, 2022

asmsaiff commented Feb 16, 2022

asmsaiff commented Feb 16, 2022

IanDelMar commented Feb 16, 2022

asmsaiff commented Feb 16, 2022 • edited Loading

asmsaiff commented Feb 16, 2022

IanDelMar commented Feb 16, 2022 • edited Loading

asmsaiff commented Feb 16, 2022 • edited Loading

pattonwebz commented Feb 16, 2022

qooglobal commented Mar 15, 2022

justinwyllie commented Mar 15, 2022 • edited Loading

asmsaiff commented Mar 15, 2022 • edited Loading

qooglobal commented Mar 15, 2022

asmsaiff commented Mar 15, 2022

AkramAdil commented Aug 16, 2022

asmsaiff commented Aug 19, 2022

rodrigobrgo commented Apr 12, 2023

remon25 commented Jul 19, 2023

robwent commented Nov 8, 2023

leecollings-sb commented Nov 9, 2023

IanDelMar commented Nov 9, 2023

leecollings-sb commented Nov 10, 2023

subrata6630 commented Aug 21, 2024

IanDelMar commented Aug 21, 2024

asmsaiff commented Aug 22, 2024

IanDelMar commented Feb 15, 2022 •

edited

Loading

justinwyllie commented Feb 15, 2022 •

edited

Loading

justinwyllie commented Feb 15, 2022 •

edited

Loading

asmsaiff commented Feb 16, 2022 •

edited

Loading

IanDelMar commented Feb 16, 2022 •

edited

Loading

asmsaiff commented Feb 16, 2022 •

edited

Loading

justinwyllie commented Mar 15, 2022 •

edited

Loading

asmsaiff commented Mar 15, 2022 •

edited

Loading