search

somewebmedia / hc-offcanvas-nav

JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes.
https://somewebmedia.github.io/hc-offcanvas-nav/
MIT License
336 stars 82 forks source link

No Bootstrap 5 Compatibility #58

Open dpf-dd opened 3 years ago

dpf-dd commented 3 years ago

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 commented 3 years ago

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

dpf-dd commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

billyarme commented 3 years ago

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 } }