How to offcanvas close after click on anchor link?

Bootstrap Studio Help
#1

It’s been less than a month since I started Bootstrap. Thanks to everyone, I was able to do what I wanted to do little by little. :grinning:

I read the Bootstrap docs and created an Offcanvas that is displayed from the right side. However, clicking the A tag link on the LP page does not close the menu.

I thought it would be a success if I hid #offcanvasRight, but I couldn’t hide the gray of Offcanvas. Is there a good way? You can download the file I made. Always thak you. :hugs:

 $(function(){ 
     var navLink = $("#offcanvasRight");
     navLink.on("click", "a", null, function () {
         navLink.collapse('hide') ;
     });
 });

offcanvas
offcanvas1012×454 13.9 KB

Download

#2

I had a similar issue at one point, but specifically for the normal Navbar.

Github question for closing Offcanvas after link click

The code I pulled, and modified for a BSS Offcanvas

$("#offcanvas-1 a").click(function(){
    $('.offcanvas').offcanvas('hide');
});

I just matched the code above to your code:

$("#offcanvasRight a").click(function(){
    $('.offcanvas').offcanvas('hide');
});
2 Likes
#3

Ohooo!!! Thank you very much! :heart_eyes: Arigato-gozaimasu!!
I searched the net for a week and couldn’t solve it. Solved with your answer. I’m very happy! :smiling_face:

2 Likes
#4

You’re welcome!
I had a client request this feature for their website to allow anchors within the navbar to click and scroll to a section. Before the navbar wouldn’t close, I originally got the source code from Fiddle. Originally the code is a bit longer, because it also includes dropdown menus in the navigation. But I was able to condense it to a smaller size and use it only for links.

I’m glad it fixes your issue! Consider using BSS offcanvas component though and change the position to “End” from the options panel for a offcanvas on the right side. Link it with the “Navbar Toggle” by adding it to the “Selector” under the options panel.

If you need help don’t hesitate to message!

1 Like
#5

The short code is great for me to understand it!

Actually, I knew that the BSS component offcanvas was prepared. But, I didn’t know how to use it. I didn’t know at how offcanvas component would work…

Offcanvas is easily on the right side after repositioning! I thought it would only be displayed from the left side. :sweat: Next, I installed a button. It worked when I specified “#offcanvas-1” as the “target” in the options panel. I was able to offcanvas without using the keyboard!

When I asked a question on the Navbar, I was able to do what I wanted from the options panel. I will look more carefully at the options panel from now on. All thanks to your kindness instructions. :smiley:

#6

You don’t need javascript for that to work, just add a data attribute to the links in the offcanvas data-bs-dismiss="offcanvas" and it will work without any extra javascript.

3 Likes
#7

Add a dismiss button with the data-bs-dismiss=“offcanvas” attribute, which triggers the JavaScript functionality. Be sure to use the < button> element with it for proper behavior across all devices.

Awesome!!! :star_struck: I didn’t understand the meaning of the above sentence on the official Japanese Bootstrap website. Immediately below that, it was also described manually via JavaScript. So I didn’t understand why, so I searched answer on the net.

This time, I learned a lot. Thank you so much! Arigato-gozaimasu! :smiley: