Bootstrap 3 collapsed menu doesn t close on click

Question

I have a more or less standard navigation from bootstrap 3   lt body data-spy  scroll  data-target   navbar-collapse  gt       lt  -- ---------- Navigation ---------- -- gt       lt div class  navbar navbar-fixed-top  role  navigation  gt           lt div class  container  gt               lt div class  navbar-header  gt                   lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt                       lt span class  sr-only  gt Toggle navigation lt  span gt                   lt  button gt                   lt a class  navbar-brand  href  index html  gt   lt img src     gt  lt  a gt               lt  div gt               lt div class  navbar-collapse collapse  gt                   lt ul class  nav navbar-nav navbar-right  gt                       lt li class  active  gt  lt a href   home  gt Home lt  a gt  lt  li gt                       lt li gt  lt a href   one  gt One lt  a gt  lt  li gt                       lt li gt  lt a href   two  gt Two lt  a gt  lt  li gt                       lt li gt  lt a href   three  gt Three lt  a gt  lt  li gt                       lt li gt  lt a href   four  gt Four lt  a gt  lt  li gt                   lt  ul gt               lt  div gt           lt  div gt       lt  div gt    It collapses normally on smaller devices  Clicking on the menu button expands the menu but if I click  or touch for that matter  on a menu link  the menu stays open  What do I have to do  to close it again

User · Answer

Please make sure You are using latest bootstrap js version  I was facing the same problem and just upgrading the bootstrap js file from bootstrap-3 3 6 did the magic

User · Answer

I found that after much struggle  trial and error  the best solution for me on jsfiddle   Link to inspiration on jsfiddle net   I am using bootstrap s navbar navbar-fixed-top with collapse and hamburger toggle   Here is my version on jsfiddle  jsfiddle Scrollspy navbar   I was only getting basic functionality using the instructions on getbootsrap com   For me  the problem was mostly in the vague directions and js recommended by the getbootstrap site   The best part was that adding this extra bit of js  which does include some of what is mentioned in the above threads  solved several Scrollspy issues for me including    Collapsed toggled nav menu hides when nav  section   e g  href   foobar   is clicked  issue addressing this thread   Active  section  was successfully highlighted  ie  js successfully created class  active   Annoying vertical scroll bar found on collapsed nav  only on small screens  was eliminated    NOTE   In the js code shown below  from the second jsfiddle link in my post    topMenu       myScrollspy        the value  myScrollspy  must match it the id    in your HTML like so      lt nav id  myScrollspy  class  navbar navbar-default navbar-fixed-top  gt    Of course you can change that value to whatever value you like

User · Answer

Though the solution posted earlier to change the menu item itself  like below  works when the menu is on a small device  it has a side effect when the menu is on full width and expanded  this can result in a horizontal scrollbar sliding over your menu items  The javascript solutions do not have this side-effect     lt li gt  lt a href   one  gt One lt  a gt  lt  li gt  to   lt li gt  lt a data-toggle  collapse  data-target   navbar-collapse  href   one  gt One lt  a gt  lt  li gt       sorry for answering like this  wanted to add a comment to that answer  but  seems I haven t sufficient credit to make remarks

User · Answer

Just to share this from solutions on GitHub  this was the popular answer   https   github com twbs bootstrap issues 9013 issuecomment-39698247    document  on  click    navbar-collapse in  function e        if    e target  is  a                 this  collapse  hide                This is wired to the document  so you don t have to do it on ready    you can dynamically append links to your menu and it will still work   and it only gets called if the menu is already expanded   Some people have reported weird flashing where the menu opens and then immediately closes with other code that did not verify that the menu had the  in  class    UPDATE 2014-11-04  apparently when using sub-menus  the above can cause problems  so the above got modified to     document  on  click    navbar-collapse in  function e        if    e target  is  a not   dropdown-toggle                   this  collapse  hide

User · Answer

navbar-nav li a   click function event        if     this  parent   hasClass  dropdown                navbar-collapse   collapse  hide          This would help in handling drop down in nav bar

User · Answer

Bootstrap s default setting is to keep the menu open when you click on a menu item  You can manually override this behaviour by calling  collapse  hide    on the jQuery element that you want to collapse

User · Answer

I am having had similar issues with Bootstrap 4  alpha-6  and Joakim Johanssons answer above started me in the right direction   No javascript required   Putting data-target   navbar-collapse  and data-toggle  collapse  into the div tag inside the nav  but surrounding the links buttons  worked for me    x000D   x000D   lt div class  navbar-nav  data-target   navbar-collapse  data-toggle  collapse  gt  x000D      lt a class  nav-item nav-link  href     gt Menu Item 1 lt  a gt  x000D         x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The problem could be you are using out of date versions of bootstrap or jquery  OR you are calling more than one version in your markup    Just keep the latest versions  you only need the one reference  Solves the problem

User · Answer

you may want to just ensure you re loading your jQuery and Bootstrap min js ATF  Your navigation is the first thing to render on the page  so if you have your scripts in the bottom of your HTML  you re losing any JavaScript functionality

User · Answer

I did       navbar-toggle   click function event            navbar-collapse   toggle  in

User · Answer

I had the same issue only on mobile but for an Angular application and this is what I did   app component html   lt nav class  navbar navbar-default navbar-fixed-top  gt     lt div class  container  gt       lt div class  col-md-12  gt         lt div class  navbar-header page-scroll  gt         lt button id   navButton  style  color red type  button  class  navbar-toggle  data-toggle  collapse  data-target   bs-example-navbar-collapse-1  gt             lt span class  sr-only  gt Toggle navigation lt  span gt             lt span class  icon-bar  gt  lt  span gt             lt span class  icon-bar  gt  lt  span gt             lt span class  icon-bar  gt  lt  span gt           lt  button gt           lt a class  navbar-brand  routerLink     gt  lt img id  navbrand  class  site-logo   src  assets img yayaka logo png   gt  lt  a gt       lt  div gt       lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt         lt ul class  nav navbar-nav navbar-right  gt           lt li class  hidden  gt             lt a href   page-top  gt  lt  a gt           lt  li gt           lt li class  dropdown  appDropdown gt             lt a class  dropdown-toggle  style  cursor  pointer   gt                          yayaka lt span class  caret  gt  lt  span gt             lt  a gt             lt ul class  dropdown-menu  gt               lt li gt  lt a  click     closeMenu    href    about  gt About lt  a gt  lt  li gt               lt li gt  lt a  click     closeMenu    href    services  gt Services lt  a gt  lt  li gt             lt  ul gt           lt  li gt           lt li class  page-scroll  gt             lt a  click     closeMenu    routerLink   profiles  gt  lt strong gt Profiles lt  strong gt  lt  a gt           lt  li gt         lt  ul gt       lt  div gt     lt  div gt     lt  div gt   lt  nav gt    app component ts    closeMenu         var isMobile    iPhone iPad iPod BlackBerry Opera Mini IEMobile Android i test navigator userAgent       if  isMobile          document getElementById  navButton   click                Hope it helps

User · Answer

This is the code that worked for me   jQuery  document   ready function               navbar-header button   click function event       if      navbar-collapse   hasClass  in              navbar-collapse   slideUp

User · Answer

In case you want to manually override this behaviour by calling  collapse  hide   within an angular s directive  here is the code   javascript file   angular    module  yourAppModule      directive  btnAutoCollapse   directive    function directive       var dir         restrict   A       scope          link  link        return dir     function link scope  element  attrs            element on  click   function event                            navbar-collapse in   collapse  hide                      Html     lt li class  navbar-btn  gt        lt a href     ng-hide  username    btn-auto-collapse   gt Sign in lt  a gt   lt  li gt

User · Answer

I had the similar issue but mine wouldn t stay open it would open close quickly  I found that I had jquery-1 11 1 min js loading before bootstrap min js  So I reversed the order of those 2 files and fixed my menu  Runs flawlessly now  Hope it helps

User · Answer

Change this     lt li gt  lt a href   one  gt One lt  a gt  lt  li gt    to this    lt li gt  lt a data-toggle  collapse  data-target   navbar-collapse  href   one  gt One lt  a gt  lt  li gt      This simple change worked for me   Ref  https   github com twbs bootstrap issues 9013

User · Answer

I had the same problem  I was using jQuery-1 7 1 and bootstrap 3 2 0  I changed my jQuery version to the latest  jquery-1 11 2  version and everything works well

User · Answer

My menu is not a navbar standard one  but i managed to auto collapse mine  using an  onclick  function and a   click       lt div class  main-header  gt       lt div class  container  gt           lt div id  menu-wrapper  gt               lt div class  row  gt                    lt div class  logo-wrapper col-lg-4 col-md-6 col-sm-7 hidden-xs  gt                    lt  div gt   lt  --   logo-wrapper -- gt                    lt div class  logo-wrapper2 visible-xs col-xs-9  gt                    lt  div gt   lt  --   smaller logo-wrapper -- gt                    lt div class  col-lg-8 col-md-6 col-sm-5 col-xs-3 main-menu text-center  gt                       lt ul class  menu-first hidden-md hidden-sm hidden-xs  gt                           lt li class  active  gt  lt a href     gt item1 lt  a gt  lt  li gt                             lt li gt  lt a href   our-team  gt item2 lt  a gt  lt  li gt                             lt li gt  lt a href   services  gt item3 lt  a gt  lt  li gt                             lt li gt  lt a href   elia  gt item4 lt  a gt  lt  li gt                             lt li gt  lt a href   portfolio  gt item5 lt  a gt  lt  li gt                             lt li gt  lt a href   contact  gt item6 lt  a gt  lt  li gt                       lt  ul gt                       lt a href     class  toggle-menu visible-md visible-sm visible-xs  gt  lt i class  fa fa-bars  gt  lt  i gt  lt  a gt                   lt  div gt   lt  --   main-menu -- gt               lt  div gt   lt  --   row -- gt           lt  div gt   lt  --   menu-wrapper -- gt           lt div class  menu-responsive hidden-lg  gt               lt ul gt                   lt li class  active  onclick       toggle-menu   click    gt  lt a href     gt item1 lt  a gt  lt  li gt                   lt li gt  lt a href   our-team  onclick       toggle-menu   click    gt item2 lt  a gt  lt  li gt                   lt li gt  lt a href   services  onclick       toggle-menu   click    gt item3 lt  a gt  lt  li gt                   lt li gt  lt a href   elia  onclick       toggle-menu   click    gt item4 lt  a gt  lt  li gt                   lt li gt  lt a href   portfolio  onclick       toggle-menu   click    gt item5 lt  a gt  lt  li gt                   lt li gt  lt a href   contact  onclick       toggle-menu   click    gt item6 lt  a gt  lt  li gt               lt  ul gt           lt  div gt   lt  --   menu-responsive -- gt       lt  div gt   lt  --   container -- gt   lt  div gt   lt  --   main-header

User · Answer

I had the same problem  ensure that bootstrap js is included in your html page  In my case the menu opened but did not close  As soon as I included the bootstrap js file  everything just worked

User · Answer

All you need is data-target   navbar-collapse  in the button  nothing else    lt button class  navbar-toggle  type  button  data-toggle  collapse  data-target   navbar-collapse  gt       lt span class  sr-only  gt Toggle navigation lt  span gt       lt span class  icon-bar  gt  lt  span gt       lt span class  icon-bar  gt  lt  span gt       lt span class  icon-bar  gt  lt  span gt   lt  button gt

User · Answer

function         var navMain       your id        navMain on  click    a   null  function            navMain collapse  hide

User · Answer

I had the same problem but caused by including twice bootstrap js and jquery js files   On a single click the event was processed twice by both jquery instances  One closed and one opened the toggle

User · Answer

Simple Try to make a function in javascript for dropdown collapse class   Example   JS    scope toogleMyClass    function           dropdown-element       timeout function             scope preLoader   false            document  ready function                     dropdown-element   toggleClass  show                      100         Hook this function to onClick simple works for me

User · Answer

I know this question is for Bootstrap 3 but if you are looking solution for Bootstrap 4  just do this     document  on  click    navbar-collapse show  function e        this  collapse  hide

User · Answer

If you only want your navigation to toggle when used on a mobile screen  just adding data-toggle  collapse  and data-target   navbar  to your a elements will work on the mobile screen  but will give you a weird flicker when clicked on a desktop screen  The jQuery solutions do not work well if you are in an Aurelia or Angular environment   The best solution for me was to create a custom attribute that listens to the corresponding media query and adds in the data-toggle  collapse attribute if desired    lt a href         collapse-toggle-if-less768 data-target   navbar  gt       The custom attribute with Aurelia looks like this    x000D   x000D  import  autoinject  from  aurelia-framework   x000D   x000D   autoinject x000D  export class CollapseToggleIfLess768CustomAttribute   x000D    element  Element  x000D   x000D    constructor element  Element    x000D      this element   element  x000D      var mql   window matchMedia   min-width  768px     x000D      mql addListener  mediaQueryList  MediaQueryList    gt  this handleMediaChange mediaQueryList    x000D      this handleMediaChange mql   x000D      x000D   x000D    handleMediaChange mediaQueryList  MediaQueryList    x000D      if  mediaQueryList matches    x000D        var dataToggle   this element attributes getNamedItem  data-toggle    x000D        if  dataToggle    x000D          this element attributes removeNamedItem  data-toggle    x000D          x000D        else   x000D        var dataToggle   this element attributes getNamedItem  data-toggle    x000D        if   dataToggle    x000D          var dataToggle   document createAttribute  data-toggle    x000D          dataToggle value    collapse   x000D          this element attributes setNamedItem dataToggle   x000D          x000D        x000D      x000D    x000D   x000D   x000D

[html] Bootstrap 3 collapsed menu doesn't close on click

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to navigation