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.
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.
$(function(){
var navLink = $("#offcanvasRight");
navLink.on("click", "a", null, function () {
navLink.collapse('hide') ;
});
});
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.
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. 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.
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.
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!!! 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!
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.
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.
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.