How to offcanvas close after click on anchor link?

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') ;
     });
 });

Download

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

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

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

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:

1 Like

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

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:

Hi. My english is very limited, sorry.
This gives me problems on Android, the navigation goes crazy. I have a one page website and when clicking on the offcanvas links the navigation is erratic.

Post the link to your website.

For the record, I am a newbie…

The navigation seems erratic on the desktop site as well as on Android.

Your off canvas navigation links reference IDs (#1, #2, #3, #4… etc.) but you’re using an obsolete method of targeting the anchor links…
<a name="1"></a>
This was deprecated long ago. In HTML5 the a element has no name attribute. I would start by getting rid of this, and just add the IDs directly to your page elements.

If I click the link PROYECTOS in your menu, I would assume you want it to scroll to the Section with the ID proyectos. So either change the ID of that section to match your menu link #3, or change the ID in your menu to match your ID of your section.

But first get rid of all these <a name="3"></a> things.

Try this and then report back.

Thanks for your quick support.
The problem is not the old tag. I have also tried browsing with id instead of . The problem arose when adding “data-bs-dismiss="offcanvas” to the links that are on the offcanvas. and Windows.
If I remove “data-bs-dismiss="offcanvas” from the links in the offcanvas, the problem disappears. I include the link using and removing “data-bs-dismiss="offcanvas:

I tried with /This instead of “data-bs-dismiss="offcanvas”)
onclick=“closeOffcanvas()” (in the links).
and
function closeOffcanvas() {

  • var offcanvas = document.getElementById(‘offcanvasExample’);*
  • var bsOffcanvas = bootstrap.Offcanvas.getInstance(offcanvas);*
  • bsOffcanvas.hide();*
    }

And I have the same problem as with "data-bs-dismiss=“offcanvas”.

At the moment, I give up the offcanvas closing after clicking on the navigation links. I include the link so you can see that navigation works well (with and renouncing the offcanvas to click on click)

The data-bs-dismiss="offcanvas" on links in a offcanvas menu doesn’t work with bootstrap 5.2 or later.
You do it like this with current version of Bootstrap

Your function closeOffcanvas() does not initialize any offcanvas instances, you could have written null.close() it would have been the same.

I don’t believe you made that site with Bootstrap Studio. There is no closing body tag you load bootstrap.min.js before both jQuery and popper, you don’t get that in Bootstrap Studio

Thanks for your quick support.
You are correct, although I have a Bootstrap Studio license, I haven’t done it with BS.
I am a newbie in the learning period and I wanted to get my hands dirty with the code. And, of course, I have messed it up.

Hello again. The link that you provide me does not work. Can you help me to provide it? In the end, I opted for another solution that satisfied my client.