Bootstrap close responsive menu on click

Question

On  PRODUCTS  click I slide up a white div  as seen in attached    When in responsive  mobile and tablet   I would like to automaticly close the responsive navbar and only show the white bar    I tried       btn-navbar   click        also tried       nav-collapse   toggle      And it does work  However in desktop size  it is also called and does something funky to the menu where it shrinks for a second     Any ideas

User · Answer

Not the newest thread but i searched for a solution for the same Problem and found one (a mix of some others).

I gave the NavButton:

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

an id / Identifier like:

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Not the finest "Idea" - but: Works for me! Now you can check up the visibility of your button (with jquery) like:

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(NOTE: This is just a Code snipped ! I used a "onclick" Event on my Nav Links! (Starting a AJAX Reguest.)

The result is: If the Button is "visible" it got "clicked" ... So: No Bug if you use the "Fullscreen view" of Bootstrap (width of over 940px).

Greetings Ralph

PS: It works fine with IE9, IE10 and Firefox 25. Didnt checked up others - But i can't see a Problem :-)

User · Answer

just to be complete  in Bootstrap 4 0 0-beta using  show worked for me      lt li gt     lt a href   Products  data-toggle  collapse  data-target   navbar-collapse show  gt Products lt  a gt   lt  li gt

User · Answer

I m using the mollwe function  although I added 2 improvements   a  Avoid the dropdown closing if the link clicked is collapsed  including other links   b  Hide the dropdown too  if you are clicking the visible web content   jQuery fn exists   function                       return this length  gt  0                         function                     var navMain       navbar-collapse                    navMain on  click    a   null  function                         if    this  attr  href                                      navMain collapse  hide                                                                   content   bind  click   function                          if      navbar-collapse navbar-ex1-collapse in   exists                              navMain collapse  hide

User · Answer

This works  but does not animate       btn-navbar   addClass  collapsed        nav-collapse   removeClass  in   css  height    0

User · Answer

if menu html is    lt div id  nav-main  class  nav-collapse collapse  gt        lt ul class  nav  gt            lt li gt                lt a href   somewhere  gt Somewhere lt  a gt            lt  li gt        lt  ul gt   lt  div gt    on nav toggle  in  class is added and removed from the toggle  check if responsive menu is opened then perform the close toggle       nav-collapse  nav a   on  click   function        if        nav-collapse    hasClass  in                   navbar-toggle   click

User · Answer

You cau use   ul nav       display  none      This will by default close the navbar  Please let me know anybody finds this usefull

User · Answer

For those using AngularJS and Angular UI Router with this  here is my solution  using mollwe s toggle   Where   navbar-main-collapse  is my  data-target    Create directive   module directive  navbarMainCollapse      rootScope   function   rootScope        return           restrict   C           link  function  scope  element                  watch for state route change  Angular UI Router specific               rootScope  on   stateChangeSuccess   function                      if   element hasClass  collapse                          element collapse  hide                                                              Use Directive    lt div class  collapse navbar-collapse navbar-main-collapse  gt       lt your menu gt

User · Answer

If for example your toggle-able icon is visible only for extra small devices  then you could do something like this       data-toggle  offcanvas     click function              side-menu   toggleClass  hidden-xs          Clicking  data-toggle  offcanvas   will add bootstrap s  hidden-xs to my  side-menu which will hide the side-menu content  but will become visible again if you increase the window size

User · Answer

This worked for me  I have done like  when i click on the menu button  im adding or removing the class  in  because by adding or removing that class the toggle is working by default   e stopPropagation    is to stop the default animation by bootstrap i guess  you can also use the  toggleClass  in place of add or remove class       ChangeToggle   on  click   function  e             if      navbar-collapse   hasClass  in                      navbar-collapse   removeClass  in                e stopPropagation              else                   navbar-collapse   addClass  in                    navbar-collapse   collapse

User · Answer

I really liked Jake Taylor s idea of doing it without additional JavaScript and taking advantage of Bootstrap s collapse toggle   I found you can fix the  flickering  issue present when the menu isn t in collapsed mode by modifying the data-target selector slightly to include the in class   So it looks like this    lt li gt  lt a href   Products  data-toggle  collapse  data-target   navbar-collapse in  gt Products lt  a gt  lt  li gt    I didn t test it with nested dropdowns menus  so YMMV

User · Answer

navbar-toggle   trigger  click

User · Answer

this solution have a fine work  on desktop and mobile    lt div id  navbar  class  navbar-collapse collapse  data-toggle  collapse   data-target   navbar-collapse collapse  gt

User · Answer

I ve got it to work with animation   Menu in html    lt div id  nav-main  class  nav-collapse collapse  gt        lt ul class  nav  gt            lt li gt                lt a href   somewhere  gt Somewhere lt  a gt            lt  li gt        lt  ul gt    lt  div gt    Binding click event on all a elements in navigation to collapse menu  Bootstrap collapse plugin       function          var navMain       nav-main         navMain on  click    a   null  function               navMain collapse  hide                    EDIT To make it more generic we can use following code snippet     function          var navMain       navbar-collapse       avoid dependency on  id          a not  data-toggle    - to avoid issues caused         when you have dropdown inside navbar      navMain on  click    a not  data-toggle     null  function               navMain collapse  hide

User · Answer

I m assuming you have a line like this defining the nav area  based on Bootstrap examples and all   lt div class  nav-collapse collapse   gt    Simply add the properties as such  like on the MENU button   lt div class  nav-collapse collapse  data-toggle  collapse   data-target   nav-collapse  gt    I ve added to  lt body gt  as well  worked   Can t say I ve profiled it or anything  but seems a treat to me   until you click on a random spot of the UI to open the menu  so not so good that     DK

User · Answer

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   lt li gt  lt a href   Products  data-toggle  collapse  data-target   navbar-collapse  gt Products lt  a gt  lt  li gt    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    lt li gt  lt a href   products  class  hidden-xs  gt Products lt  a gt  lt  li gt   lt li gt  lt a href   products  class  visible-xs  data-toggle  collapse  data-target   navbar-collapse  gt Products lt  a gt  lt  li gt    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 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

User · Answer

Just to spell out user1040259 s solution  add this code to your   document  ready function                  nav   click  function                 btn-navbar   addClass  collapsed                nav-collapse   removeClass  in   css  height    0              As they mention  this doesn t animate the move    but it does close the nav bar on item selection

User · Answer

Bootstrap 4 solution without any Javascript  Add attributes data-toggle  collapse  data-target   navbarSupportedContent show   to the div  lt div class  collapse navbar-collapse  gt    Make sure you provide the correct id in data-target   lt div className  collapse navbar-collapse  id  navbarSupportedContent  data-toggle  collapse  data-target   navbarSupportedContent show  gt        show is to avoid menu flickering in large resolutions    x000D   x000D   lt script src  https   code jquery com jquery-3 3 1 slim min js  integrity  sha384-q8i X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 3 umd popper min js  integrity  sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK l8WvCWPIPm49  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap min js  integrity  sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW JmZQ5stwEULTy  crossorigin  anonymous  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  integrity  sha384-MCw98 SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO  crossorigin  anonymous  gt  x000D   lt nav class  navbar navbar-expand-lg navbar-light bg-light  gt  x000D     lt a class  navbar-brand  href     gt Navbar lt  a gt  x000D     lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarSupportedContent  aria-controls  navbarSupportedContent  aria-expanded  false  aria-label  Toggle navigation  gt  x000D       lt span class  navbar-toggler-icon  gt  lt  span gt  x000D     lt  button gt  x000D   x000D     lt div class  collapse navbar-collapse  id  navbarSupportedContent  data-toggle  collapse  data-target   navbarSupportedContent show  gt  x000D       lt ul class  navbar-nav mr-auto  gt  x000D         lt li class  nav-item active  gt  x000D           lt a class  nav-link  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link  href     gt Link lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown  gt  x000D           lt a class  nav-link dropdown-toggle  href     id  navbarDropdown  role  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt  x000D            Dropdown x000D           lt  a gt  x000D           lt div class  dropdown-menu  aria-labelledby  navbarDropdown  gt  x000D             lt a class  dropdown-item  href     gt Action lt  a gt  x000D             lt a class  dropdown-item  href     gt Another action lt  a gt  x000D             lt div class  dropdown-divider  gt  lt  div gt  x000D             lt a class  dropdown-item  href     gt Something else here lt  a gt  x000D           lt  div gt  x000D         lt  li gt  x000D         lt li class  nav-item  gt  x000D           lt a class  nav-link disabled  href     gt Disabled lt  a gt  x000D         lt  li gt  x000D       lt  ul gt  x000D       lt form class  form-inline my-2 my-lg-0  gt  x000D         lt input class  form-control mr-sm-2  type  search  placeholder  Search  aria-label  Search  gt  x000D         lt button class  btn btn-outline-success my-2 my-sm-0  type  submit  gt Search lt  button gt  x000D       lt  form gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

In the HTML I added a class of nav-link to the a tag of each navigation link       nav-link   click      function                  navbar-collapse   removeClass  in

User · Answer

This should do the trick   Requires bootstrap js   Example    http   getbootstrap com javascript  collapse          nav li a   click function               nav-main   collapse  hide              This does the same thing as adding  data-toggle  collapse   and  href  yournavigationID   attributes to navigation menus  tags

User · Answer

Tuggle Nav Close  IE browser compatible answer  without any console error  If you are using bootstrap  use this      nav li a   on  click   function          if      navbar   hasClass  in                  navbar-collapse in   show              else               navbar-collapse in   hide

User · Answer

I think you are all over engineering            navbar-collapse ul li a   click function                     navbar-toggle visible   click              EDIT  To take care of sub menus  make sure their toggle anchor has the dropdown-toggle class on it         function                       navbar-collapse ul li a not  dropdown-toggle    click function                               navbar-toggle visible   click                                EDIT 2  Add support for phone touch         function                      navbar-collapse ul li a not  dropdown-toggle    bind  click touchstart   function                              navbar-toggle visible   click

[javascript] Bootstrap close responsive menu "on click"

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap