No Bootstrap 5 Compatibility

[dpf-dd]

I know, BS5 is still beta - but there is a major change that is breaking hc-offcnvas' ability to show the second layer of a multidimensional navigation.
=> data-toggle="dropdown" is going to be data-bs-toggle="dropdown" in BS5

If I'm trying with BS4 markup your script is working fine but my dropdown in BS5-menu doesn't work and vice versa...
Would be nice to get rid on it in the future :)

Meanwhile, I got a dirty workaround to change the toggle attribute in the cloned nav:

$(".hc-offcanvas-nav .dropdown-toggle ").each(function() {
  $(this).removeAttr('data-bs-toggle');
  $(this).attr("data-toggle", "dropdown");
});

[somewebmedia]

I'm not sure what does the data-toggle="dropdown" have to do with hc-offcnvas-nav?

[dpf-dd]

I don't know because I'm not able to "read" your whole script but if I'm right your script creates a clone and is handling that clone. Everything is working fine on BS4 native navbars but not on BS5 - my Submenu is just not appearing on toggling its parent menu-item (in your clone).
On the other side I can't find any "data-toggle" in your script with search functions, so I'm willing to agree that this has nothing to do with your script? Strange thing...

Don't worry, it is not a problem at all because I got that little workaround for me.

[maddorris]

Hey, just to be clear - your script working well with BS5 and doesnt require any workaround. So the issue of dpf-dd is something else, not this nav script. BTW - very nice and simple to implement solution. VEry appreciate this. I will probably make some native Joomla menu module based on this one. Will then share it.

[dpf-dd]

New project, same error on Bootstrap 5 beta2... but figured ist out: The error is thrown in Bootstraps dropdown.js - but my workaround in the opening post does the job :)
I'm loving your hc-offcanvas! Best mobile menu out there and easy to use. Thanks a lot and best regards!

[somewebmedia]

If you could make a test repo with your setup for me, I could check what is happening.

[billyarme]

Hello,

i have and issue with Bootstrap 5 too. I get a strange page scroll when clicking on toggler. I tested it on your docs/index.html by including bootstrap.min.css on the header. Go ahead and check it yourself. Here is a demo of my under-developement template.

https://vahost.eu/demo/

On bootstrap 4 is working well thought....

Cant figure it out how to solve it. Any ideas?

UPDATE:

Here is a quick fix for those who might have the same issue with me:
@media (prefers-reduced-motion:no-preference){
:root{
scroll-behavior:auto!important
}
}