Can't get offcanvas to work

[stefwilliams]

Hi,
I'm struggling to get anything OffCanvas to work in my child theme.

If I copy code directly from the Bootscore or Bootstrap docs, eg, https://getbootstrap.com/docs/5.3/components/offcanvas/#placement (the first html block), the button shows, but also the content of offcanvas body. Clicking on the button gives an overlay (but nothing else), which I can close, but the content is already visible without the overlay.

I'm pretty sure things are installed correctly because SCSS is working, etc and I'm getting no JavaScript errors. but I can't figure out what's going on. Any ideas please?

Thanks in advance.

Stef

[crftwrk]

Hi,

converted this into a discussion because this is not a bug in the theme.

I copied the code from https://getbootstrap.com/docs/5.3/components/offcanvas/#placement to a HTML block and works as expected:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

Please share a link to your site to debug and help here out.

[stefwilliams]

Hi again,
Yeah I found the issue - basically I'm trying to create a megamenu in the nav that always uses offcanvas. I noticed it was working as expected on small-screen breakpoints, so realised it must be one of the default styles associated with the navbar (which make it work for the default menu in the child theme). Removed the default class names and all is good now.
Just in case anyone else has this issue though, that's what you need to do...
PS, I noticed some of the discussions on here mention megamenus and hint that there is documentation somewhere for it, but I couldn't find any. Is it available somewhere?

[crftwrk]

Great to hear!

noticed some of the discussions on here mention megamenus and hint that there is documentation somewhere for it

There is no documentation to create a mega menu because Bootstrap does not support that and does not support deeper levels in dropdowns as well. So, you have to code this by yourself. Follow steps in this comment to create deeper levels https://github.com/orgs/bootscore/discussions/853#discussioncomment-10799993