Hide Twitter Bootstrap nav collapse on click

Question

This is not a submenu dropdown  the category is class li as in the picture    By selecting a category from the responsive menu  the template is just one page   I want to hide nav collapse automatically when clicking  Also stroll to use as navigation  since the template has only one page  I seek a solution that does not affect it  here is the HTML code of menu        lt  -- NAVBAR                                                      -- gt   lt div class  quot navbar navbar-fixed-top quot  gt     lt div class  quot navbar-inner quot  gt       lt div class  quot container quot  gt         lt a class  quot btn btn-navbar quot  data-toggle  quot collapse quot  data-target  quot  nav-collapse quot  gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt  a gt         lt a class  quot brand quot  href  quot   quot  gt Carousel Demo lt  a gt         lt div class  quot nav-collapse quot  gt           lt ul class  quot nav quot   gt             lt li class  quot active quot  gt  lt a href  quot  home quot  gt Home lt  a gt  lt  li gt             lt li gt  lt a href  quot  about quot  gt About lt  a gt  lt  li gt             lt li gt  lt a href  quot  portfolio quot  gt Portfolio lt  a gt  lt  li gt             lt li gt  lt a href  quot  services quot  gt Services lt  a gt  lt  li gt             lt li gt  lt a href  quot  contact quot  gt Contact lt  a gt  lt  li gt             lt  -- dropdown -- gt           lt  ul gt           lt  --   nav -- gt         lt  div gt         lt  --  nav-collapse -- gt       lt  div gt       lt  --   container -- gt     lt  div gt     lt  --   navbar-inner -- gt   lt  div gt   lt  --   navbar -- gt

User · Answer

I posted a solution that works with Aurelia here: https://stackoverflow.com/a/41465905/6466378

The problem is you can not just add data-toggle="collapse" and data-target="#navbar" to your a elements. And jQuery does not work wenn 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:

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

The custom attribute with Aurelia looks like this:

_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) => 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_

User · Answer

The navigation should be closed any time a user clicks anywhere on the body - not just navigation elements  Say menu is open  but user clicks in the page body  User expects to see menu close    You also have to make sure toggle button is visible  otherwise a jump is seen in menu     document  ready function          body   click function event               only do this if navigation is visible  otherwise you see jump in navigation while collapse   is called           if      navbar-collapse   is   visible    amp  amp      navbar-toggle   is   visible                       navbar-collapse   collapse  toggle

User · Answer

Add an id then to each    lt li gt  add data-target  myMenu  data-toggle  collapse   lt div id  myMenu  class  nav-collapse  gt       lt ul class  nav  gt         lt li class  active  data-target  myMenu  data-toggle  collapse  gt  lt a href   home  gt Home lt  a gt  lt  li gt         lt li data-target  myMenu  data-toggle  collapse  gt  lt a href   about  gt About lt  a gt  lt  li gt         lt li data-target  myMenu  data-toggle  collapse  gt  lt a href   portfolio  gt Portfolio lt  a gt  lt  li gt         lt li data-target  myMenu  data-toggle  collapse  gt  lt a href   services  gt Services lt  a gt  lt  li gt         lt li data-target  myMenu  data-toggle  collapse  gt  lt a href   contact  gt Contact lt  a gt  lt  li gt       lt  ul gt   lt  div gt

User · Answer

function             nav a   on  click   function             if     navbar-toggle   css  display      none                    navbar-toggle   trigger   click

User · Answer

This worked well for me  Its the same as the accepted answer but fixes the issue related to the desktop tablet view   x000D   x000D      navbar-nav a   on  click   function      x000D          if  window innerWidth  lt   768    x000D                  navbar-toggle   click    x000D            x000D          x000D   x000D   x000D

User · Answer

For those who have noticed desktop navbars flicker when using this solution       nav a   on  click   function            navbar-collapse   collapse  hide           A simple solution to that problem is to reference the collapsed navbar only by checking for the presence of  in        navbar-collapse  nav a   on  click   function        if     navbar-collapse   hasClass  in                      navbar-collapse   collapse  hide                This collapses the navbar on click when the navbar is in mobile mode  but will leave alone the desktop version   This avoids the flickering many people have witnessed occurring on desktop versions   Additionally  if you have a navbar with dropdown menus you won t be able to see these as the navbar will be hidden as soon as you click on them  so if you have dropdown menus  like I do    use the following       nav a   on  click   function e       if    this  closest  li   hasClass  dropdown    amp       navbar-collapse   hasClass  in                      navbar-collapse   collapse  hide                This looks for the presence of the dropdown class above the link clicked on in the DOM  if it exists  then the link was intending to launch a drop down menu and consequently the menu isn t hidden   When you click on a link within the dropdown menu  the navbar will hide correctly

User · Answer

On each dropdown link put data-toggle  collapse  and data-target   nav-collapse  where nav-collapse is the name you give it to the dropdown list    lt ul class  nav   gt         lt li class  active  gt  lt a href   home  gt Home lt  a gt  lt  li gt         lt li gt  lt a href   about  data-toggle  collapse  data-target   nav-collapse  gt About lt  a gt  lt  li gt         lt li gt  lt a href   portfolio  data-toggle  collapse  data-target   nav-collapse  gt Portfolio lt  a gt  lt  li gt         lt li gt  lt a href   services  data-toggle  collapse  data-target  nav-collapse  gt Services lt  a gt  lt  li gt         lt li gt  lt a href   contact  data-toggle  collapse  data-target   nav-collapse  gt Contact lt  a gt  lt  li gt         lt  -- dropdown -- gt     lt  ul gt    This is working perfectly on screen that have a dropdown like mobile screens  but on desktop and tablet it creates a flickr  This is because the  collapsing class is applied   To remove the flickr I created a media query and inserted overflow hidden to the collapsing class    media  min-width  768px     collapsing       overflow  inherit

User · Answer

body  nav a   click function  event            only do this if navigation is visible  otherwise you see jump in       navigation while collapse   iS called      if      navbar-collapse   is   visible    amp  amp      navbar-toggle   is   visible              navbar-collapse   collapse  toggle

User · Answer

Even more elegant without a lick of duplicated code  is to simply apply the data-toggle  collapse  and data-target   nav-collapse  attributes to the nav itself    lt nav class  nav-collapse  data-toggle  collapse  data-target   nav-collapse  gt     lt ul class  nav  gt       lt li class  active  gt  lt a href   home  gt Home lt  a gt  lt  li gt       lt li gt  lt a href   about  gt About lt  a gt  lt  li gt       lt li gt  lt a href   portfolio  gt Portfolio lt  a gt  lt  li gt       lt li gt  lt a href   services  gt Services lt  a gt  lt  li gt       lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt     lt  ul gt   lt  nav gt    Super clean  no JavaScript required  Works great  so long as your your nav a elements have plenty enough padding for fat fingers  and you aren t preventing click event bubbling via e stopPropagation   when users click on nav a items

User · Answer

I just replicate the 2 attributes of the btn-navbar  data-toggle  collapse  data-target   nav-collapse in   on each link like this    lt div class  nav-collapse  gt     lt ul class  nav   gt       lt li class  active  gt  lt a href   home  data-toggle  collapse  data-target   nav-collapse in  gt Home lt  a gt  lt  li gt       lt li gt  lt a href   about  data-toggle  collapse  data-target   nav-collapse in  gt About lt  a gt  lt  li gt       lt li gt  lt a href   portfolio  data-toggle  collapse  data-target   nav-collapse in  gt Portfolio lt  a gt  lt  li gt       lt li gt  lt a href   services  data-toggle  collapse  data-target   nav-collapse in  gt Services lt  a gt  lt  li gt       lt li gt  lt a href   contact  data-toggle  collapse  data-target   nav-collapse in  gt Contact lt  a gt  lt  li gt     lt  ul gt   lt  div gt    In the Bootstrap 4 Navbar  in has changed to show so the syntax would be   data-toggle  collapse  data-target   navbar-collapse show

User · Answer

x000D   x000D      nav a   click function      x000D          navbar-collapse   collapse  hide    x000D      x000D   x000D   x000D

User · Answer

I checked in menu is opened by checking  in  class and then run the code       navbar-collapse a   on  click   function        if        navbar-collapse    hasClass  in                   navbar-toggle   click                works perfectly

User · Answer

Another quick solution for Bootstrap 3   could be      document   ready function                   Hide collapsed menu on click                nav a   each function  idx  obj            var selected     obj            selected on  click   function                 if  selected closest   collapse in   length  gt  0                        navbar-toggle   click      bootstrap 3 x by Richard

User · Answer

function             nav a   on  click touchstart   function             if     navbar-toggle   css  display      none                    navbar-toggle   trigger   click                                NOTE I added the  touchstart  for mobile touch  touchstart end has no delay

User · Answer

In most cases you will only want to call the toggle function if the toggle button is visible     if      navbar-toggler   is   visible        navbar-toggler   click

User · Answer

If you have scrolling problems after using the jQuery solution described above  e g      navbar-collapse   collapse  toggle    then this is caused by Bootstrap adding the CSS class overlay-active in the parent element  This can even go up to your body element  To solve this you have to remove this class   lt script type  quot text javascript quot  gt        document  ready function                 nav-item   click function                    overlay-active   removeClass  overlay-active                          lt  script gt

User · Answer

This hides nav collapse instead of animating it but same concept as above answer  JS       nav a   on  click   function              funk   toggleClass  in collapse          HTML    lt div class  navbar-collapse  id  funk  gt    I prefer this on single page sites because I use localScroll js that already animates

User · Answer

Bootstrap3 users try the given below code  It worked for me   function close toggle        if    window  width    lt   768              nav a   on  click   function                  navbar-toggle   click                      else            nav a   off  click           close toggle       window  resize close toggle

User · Answer

Try this   Bootstrap 3  Brilliant exacly what I was looking for  however I had some clashes with the javascript and the bootstrap modal  this fixed it          function             navbar-nav   on  click   function             if     navbar-header  navbar-toggle   css  display      none                    navbar-header  navbar-toggle   trigger   click                             Hope this helps

User · Answer

This is the best solution I have used     document  ready function                   nav a   on  click   function                   if      btn-navbar   is   visible          btn-navbar   trigger  click        bootstrap 2 x             if      navbar-toggle   is   visible          navbar-toggle   trigger  click        bootstrap 3 x

User · Answer

Here s how I did it  If there is a smoother way  please please tell me   Inside the  lt a gt  tags where the links for the menu are I added this code   onclick      navbar-toggle   click      It preserves the slide animation  So in full use it would look like this    lt nav class  navbar navbar-inverse navbar-fixed-top  role  navigation  ng-controller  topNavController as topNav  gt   lt div class  container  gt       lt div class  navbar-header  gt           lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-controls  navbar  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  href  home html  gt My Cool Site lt  a gt       lt  div gt       lt div id  navbar  class  navbar-collapse collapse  gt           lt ul class  nav navbar-nav  gt               lt li class  active  onclick      navbar-toggle   click    gt  lt a href  home html  onclick      navbar-toggle   click    gt  lt i class  fa fa-home  gt  lt  i gt  Home lt  a gt  lt  li gt               lt li gt  lt a href  aboutus html  onclick      navbar-toggle   click    gt About Us lt  a gt  lt  li gt           lt  ul gt       lt  div gt  lt  --  nav-collapse -- gt   lt  div gt

User · Answer

Update your     lt li gt     lt a href   about  gt About lt  a gt   lt  li gt    to    lt li gt     lt a data-toggle  collapse  data-target   nav-collapse  href   about  gt About lt  a gt   lt  li gt    This simple change worked for me   Ref  https   github com twbs bootstrap issues 9013

User · Answer

I m on Bootstrap 4  using fullPage js with a fixed top nav  and tried everything listed here  with mixed results     Tried the best  clean way    data-toggle  collapse  data-target   navbar-collapse show    The menu would collapse  but the href links wouldn t lead anywhere  Tried the logical other ways       myClickableElements   on  click touchstart   function          navbar-collapse show   collapse  hide         or       navbar-collapse show   collapse  toggle         or       navbar-toggler   click         There would be some weird behavior because of the touchstart event   the clicked buttons would end up not be the ones I actually clicked  hence breaking the links  Plus it would add the  show class to some other unrelated dropdowns in my nav  causing some more weird stuff  Tried to change div to li Tried to e preventDefault   and e stopPropagation   Tried and tried more   Nothing would work   So  instead  I had the  so far  marvelous idea of doing that      window  on  hashchange  function           navbar-collapse show   collapse  hide          I already had stuff in that hashchange function  si I just had to add this line    It actually does exactly what I want   collapsing the menu when the hash changes  i e  a click leading somewhere else has occurred   Which is good  cause I can now have links in my menu that won t collapse it   Who knows  maybe this will help someone in my situation   And thanks to everyone who has participated in that thread  lots of info to be learned here

User · Answer

Tested on Bootstrap 3 3 6 - work s    x000D   x000D      nav a   click function      x000D          navbar-collapse   collapse  hide    x000D      x000D   x000D   x000D

User · Answer

Adding the data-toggle  collapse  data-target   navbar-collapse in  to the tag  lt a gt  worked for me    lt div gt            lt button type  button  class  navbar-toggle   data-toggle  collapse  data-target   navbar-collapse  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  div gt               lt div class  navbar-collapse collapse  gt               lt ul class  nav navbar-nav navbar-right  gt                   lt li class  nav-item  gt  lt a                     href     data-toggle  collapse  data-target   navbar-collapse in  class  nav-link   gt Home                  lt  a gt  lt  li gt               lt  ul gt       lt  div gt

User · Answer

Mobile view  how to hide toggle navigation in bootstrap   dropdown   jquery   scrollto with navigation items that points to anchors ids on the same page  one page template  The issue I was experimenting with any of the above solutions was that they are collapsing only the submenu items  while the navigation menu doesn t collapse   So I did my thought   and what can we observe  Well  every time we the users click an scrollto link  we want the page to scroll to that position and contemporaneously  collapse the menu to restore the page view   Well    why not to assign this job to the scrollto functions  Easy  -   So in the two codes     scroll to top action     scroll-top   on  click   function event        event preventDefault           html  body   animate  scrollTop 0    slow      and     scroll function function scrollToID id  speed   var offSet   67  var targetOffset     id  offset   top - offSet  var mainNav       main-nav           html body   animate  scrollTop targetOffset   speed   if  mainNav hasClass  open          mainNav css  height    1px   removeClass  in   addClass  collapse        mainNav removeClass  open        I ve just added the same command in both the functions      if     navbar-toggle   css  display      none            navbar-toggle   trigger   click          kudos to one of the above contributors   like this  the same should be added to both the scrolls       scroll-top   on  click   function event        event preventDefault           html  body   animate  scrollTop 0    slow    if     navbar-toggle   css  display      none            navbar-toggle   trigger   click             if you wanna see it in action just check it out recupero dati da NAS

User · Answer

I think it s better to use default Bootstrap 3 s collapse js methods using the  navbar-collapse as the collapsible element you wish to hide as shown below    Other solutions may cause other undesired problems with the way elements display or function in your web page  Therefore  while some solutions may appear to fix your initial problem it may very well introduce others  so make sure you run thorough testing of your site after any fix   To see this code in action         Press  Run This Code Snippet  below    Press  Full Page  button    Scale window until drop-down activates    Then select a menu option and voila       Cheers    x000D   x000D      nav a   click function     x000D        navbar-collapse   collapse  hide      x000D      x000D   lt html lang  en  gt  x000D     lt head gt  x000D       lt meta charset  utf-8  gt  x000D       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D       lt meta name  author  content  Franciscus Agnew  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D       lt  -- The above 3 meta tags  must  come first in the head  any other head content must come  after  these tags -- gt  x000D       lt title gt Bootstrap Navbar Collapse Function lt  title gt  x000D   x000D       lt  -- Latest compiled and minified CSS -- gt  x000D       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  integrity  sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7  crossorigin  anonymous  gt  x000D   x000D       lt  -- HTML5 shim and Respond js for IE8 support of HTML5 elements and media queries -- gt  x000D       lt  -- WARNING  Respond js doesn t work if you view the page via file    -- gt  x000D       lt  -- if lt IE 9  gt  x000D         lt script src  https   oss maxcdn com html5shiv 3 7 2 html5shiv min js  gt  lt  script gt  x000D         lt script src  https   oss maxcdn com respond 1 4 2 respond min js  gt  lt  script gt  x000D       lt   endif -- gt  x000D     lt  head gt  x000D     x000D     lt body gt  x000D       lt header gt  x000D         lt nav class  navbar navbar-default navbar-fixed-top  role  navigation  gt  x000D           lt div class  container  gt  x000D             lt div class  navbar-header  gt  x000D               lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-expanded  navbar  gt  lt span class  sr-only  gt Toggle navigation lt  span gt Menu  lt span class  glyphicon glyphicon-chevron-down  gt  lt  span gt  lt  button gt  x000D               lt a class  navbar-brand  href     gt Brand Logo lt  a gt  x000D             lt  div gt  lt  -- navbar-header -- gt  x000D       x000D             lt div class  collapse navbar-collapse  id  navbar  gt  x000D               lt ul class  nav navbar-nav navbar-right  gt  x000D                 lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   about  gt About lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   portfolio  gt Portfolio lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   services  gt Services lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   staff  gt Staff lt  a gt  lt  li gt  x000D                 lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt  x000D               lt  ul gt  lt  -- navbar-right -- gt  x000D             lt  div gt  lt  -- navbar-collapse -- gt  x000D             x000D           lt  div gt  lt  -- container -- gt  x000D         lt  nav gt  lt  -- navbar-fixed-top -- gt  x000D       lt  header gt  x000D       x000D       lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt  x000D       x000D       x000D       lt  -- Include all compiled plugins  below   or include individual files as needed -- gt  x000D       lt  -- Latest compiled and minified JavaScript -- gt  x000D       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  integrity  sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS  crossorigin  anonymous  gt  lt  script gt  x000D       x000D       lt  -- Custom Navbar Collapse Script Solution -- gt  x000D       lt script gt  x000D            nav a   click function     x000D              navbar-collapse   collapse  hide      x000D            x000D       lt  script gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Better to use default collapse js methods  V3 docs  V4 docs        nav a   click function            nav-collapse   collapse  hide

User · Answer

100  working -  Add in HTML   lt div id  myMenu  class  nav-collapse  gt    Javascript     function      var navMain       myMenu     navMain on  click    a   null  function           navMain collapse  hide

User · Answer

try this       nav a   on  click   function            btn-navbar   click      bootstrap 2 x         navbar-toggle   click      bootstrap 3 x by Richard         navbar-toggler   click      bootstrap 4 x

User · Answer

Bootstrap sets a  in class on the Collapse element to trigger the animation     to open it  If you simply remove the  in class  the animation doesn t run  but will hide the element     not exactly what you want   Likely faster to run an if statement to check if the default bootstrap class  in has been set on the element    So this code just says       if my element has the class  in applied  close it by triggering the default Bootstrap animation  Otherwise run the default Bootstrap action animation of opening it       navbar a   on  click touchstart   function            if  in class is set on element  the element is visible     you want to hide it     if      navbar   hasClass  in                 collapse toggle will remove the  in class and animate the element closed              navbar   collapse  toggle

[jquery] Hide Twitter Bootstrap nav collapse on click

Examples related to jquery

Examples related to html

Examples related to twitter-bootstrap