Bootstrap close responsive menu “on click”

by

You don’t have to add any extra javascript to what’s already included with bootstraps collapse option. Instead simply include data-toggle and data-target selectors on your menu list items just as you do with your navbar-toggle button. So for your Products menu item it would look like this

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Then you would need to repeat the data-toggle and data-target selectors for each menu item

EDIT!!!
In order to fix overflow issues and flickering on this fix I’m adding some more code that will fix this and still not have any extra javascript. Here is the new code:

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

Here it is at work http://jsfiddle.net/jaketaylor/84mqazgq/

This will make your toggle and target selectors specific to screen size and eliminate glitches on the larger menu. If anyone is still having issues with glitches please let me know and I’ll find a fix.
Thanks

EDIT: In the bootstrap v4.1.3 & v5.0 I couldnt use visible/hidden classes. Instead of hidden-xs use d-none d-sm-block and instead of visible-xs use d-block d-sm-none.

EDIT: In bootstrap v5, Instead of data-toggle use data-bs-toggle and instead of data-target use data-bs-target.

More Related Contents:

  1. Datepicker validation 18 years of age [closed]
  2. Should the Bootstrap media queries be saved in a css file or a js file?
  3. Navbar dropdown (collapse) is not working in Bootstrap 5
  4. Changing nav-bar color after scrolling?
  5. How to create a sticky navigation bar that becomes fixed to the top after scrolling
  6. How to partition input field to appear as separate input fields on screen?
  7. How to create a responsive image that also scales up in Bootstrap 3
  8. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  9. Bootstrap Dropdown with Hover
  10. How to resize Twitter Bootstrap modal dynamically based on the content
  11. How to add smooth scrolling to Bootstrap’s scroll spy function
  12. Bootstrap Dropdown menu is not working
  13. Preserve browser window aspect ratio while shrinking [closed]
  14. Change from (+) symbol to (-) after click (function(){
  15. How can i create html automatic change page? [duplicate]
  16. Change :hover CSS properties with JavaScript
  17. Changing element style attribute dynamically using JavaScript
  18. How to use CSS (and JavaScript?) to create a blurred, “frosted” background?
  19. Google Maps: How to create a custom InfoWindow?
  20. Performance differences between visibility:hidden and display:none
  21. Cannot access cssRules from local css file in Chrome 64
  22. CSS3-Animate elements if visible in viewport (Page Scroll)
  23. “Scroll” to the very right of a long text input
  24. How to scroll table’s “tbody” independent of “thead”?
  25. Make image fill div completely without stretching
  26. How do I make a move up and down when I’m scrolling the page?
  27. Hide div element when screen size is smaller than a specific size
  28. How to Bootstrap navbar static to fixed on scroll?
  29. How to use pagination on HTML tables?
  30. How can I reorder elements with JavaScript?

Leave a Comment