How to hide collapsible Bootstrap 4 navbar on click

Question

I ve created this collapsable navbar using Bootstrap 4 that works nicely  but I would like it to close when the user clicks on a link  Any way to do this   Thanks  html navbar    lt nav class  navbar navbar-toggleable-md fixed-top  gt    lt button id  nav-btn class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarDiv   aria-expanded  false  aria-label  Toggle navigation  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 class  container  gt                    lt a class  navbar-brand  href     gt  lt img src  Images logo png  width  60px  gt  lt  a gt                        lt div class  collapse navbar-collapse  id  navbarDiv  gt                            lt ul class  navbar-nav mr-auto  gt                                lt li class  nav-item active  gt                                    lt a class  nav-link  href   home  gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt                                lt  li gt                                lt li class  nav-item  gt                                    lt a class  nav-link  href   about-us  gt About lt  a gt                                lt  li gt                                lt li class  nav-item  gt                                    lt a class  nav-link  href   pricing  gt Pricing lt  a gt                                lt  li gt                            lt  ul gt                        lt  div gt                lt  div gt            lt  nav gt    css for  icon-bar  since Bootstrap 4 doesn t use the icon-bar class    navbar-toggler  icon-bar     margin  7px    display  block    width  22px    height  1px    background-color   cccccc    border-radius  1px

User · Answer

You can call   collapse  hide    with an event handler on the links    x000D   x000D      nav-link   on  click  function     x000D        navbar-collapse   collapse  hide    x000D      x000D   navbar-toggler  icon-bar   x000D    margin  7px  x000D    display  block  x000D    width  22px  x000D    height  1px  x000D    background-color   cccccc  x000D    border-radius  1px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 0 0-alpha 6 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 0 0-alpha 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt nav class  navbar navbar-toggleable-md fixed-top  gt  x000D     lt button id  nav-btn  class  navbar-toggler navbar-toggler-right  type  button  data-toggle  collapse  data-target   navbarDiv  aria-expanded  false  aria-label  Toggle navigation  gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D    lt  button gt  x000D     lt div class  container  gt  x000D       lt a class  navbar-brand  href     gt  lt img src  Images logo png  width  60px  gt  lt  a gt  x000D       lt div class  collapse navbar-collapse  id  navbarDiv  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   home  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   about-us  gt About lt  a gt  x000D           lt  li gt  x000D           lt li class  nav-item  gt  x000D             lt a class  nav-link  href   pricing  gt Pricing lt  a gt  x000D           lt  li gt  x000D         lt  ul gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

You can add the collapse component to the links like this    lt ul class  quot navbar-nav mr-auto quot  gt        lt li class  quot nav-item active quot  gt            lt a class  quot nav-link quot  href  quot  home quot  data-toggle  quot collapse quot  data-target  quot  navbar-collapse show quot  gt Home  lt span class  quot sr-only quot  gt  current  lt  span gt  lt  a gt        lt  li gt        lt li class  quot nav-item quot  gt            lt a class  quot nav-link quot  href  quot  about-us quot  data-toggle  quot collapse quot  data-target  quot  navbar-collapse show quot  gt About lt  a gt        lt  li gt        lt li class  quot nav-item quot  gt            lt a class  quot nav-link quot  href  quot  pricing quot  data-toggle  quot collapse quot  data-target  quot  navbar-collapse show quot  gt Pricing lt  a gt        lt  li gt    lt  ul gt   BS3 demo using  data-toggle  method Or   perhaps a better way  use jQuery like this       navbar-nav gt li gt a   on  click   function            navbar-collapse   collapse  hide         BS3 demo using jQuery method  Update 2019 - Bootstrap 4 The navbar has changed  but the  quot close after click quot  method is still the same  BS4 demo jQuery method BS4 demo data-toggle method  Update 2021 - Bootstrap 5  beta  Use javascript to add a click event listener on the menu items to close the Collapse navbar   const navLinks   document querySelectorAll   nav-item   const menuToggle   document getElementById  navbarSupportedContent   const bsCollapse   new bootstrap Collapse menuToggle  navLinks forEach  l    gt        l addEventListener  click        gt    bsCollapse toggle          BS5 demo javascript method Or  Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar     lt nav class  quot navbar navbar-expand-lg navbar-light bg-light quot  gt       lt div class  quot container quot  gt           lt a class  quot navbar-brand quot  href  quot   quot  gt Navbar lt  a gt           lt button class  quot navbar-toggler quot  type  quot button quot  data-bs-toggle  quot collapse quot  data-bs-target  quot  navbarSupportedContent quot  aria-controls  quot navbarSupportedContent quot  aria-expanded  quot false quot  aria-label  quot Toggle navigation quot  gt               lt span class  quot navbar-toggler-icon quot  gt  lt  span gt           lt  button gt           lt div class  quot collapse navbar-collapse quot  id  quot navbarSupportedContent quot  gt               lt ul class  quot navbar-nav me-auto quot  gt                   lt li class  quot nav-item active quot  gt                       lt a class  quot nav-link quot  href  quot   quot  data-bs-toggle  quot collapse quot  data-bs-target  quot  navbar-collapse show quot  gt Home lt  a gt                   lt  li gt                   lt li class  quot nav-item quot  gt                       lt a class  quot nav-link quot  href  quot   quot  data-bs-toggle  quot collapse quot  data-bs-target  quot  navbar-collapse show quot  gt Link lt  a gt                   lt  li gt                   lt li class  quot nav-item quot  gt                       lt a class  quot nav-link disabled quot  href  quot   quot  data-bs-toggle  quot collapse quot  data-bs-target  quot  navbar-collapse show quot  gt Disabled lt  a gt                   lt  li gt               lt  ul gt               lt form class  quot d-flex my-2 my-lg-0 quot  gt                   lt input class  quot form-control me-sm-2 quot  type  quot search quot  placeholder  quot Search quot  aria-label  quot Search quot  gt                   lt button class  quot btn btn-outline-success my-2 my-sm-0 quot  type  quot submit quot  gt Search lt  button gt               lt  form gt           lt  div gt       lt  div gt   lt  nav gt   BS5 demo data-attributes method

User · Answer

I am using ANGULAR and since it gave me problems the routerLink just add the data-toggle and target in the li tag     or use jquery like  ZimSystem    x000D   x000D   lt div class  collapse navbar-collapse  id  navbarSupportedContent  gt  x000D         lt ul class  navbar-nav mr-auto  gt  x000D           lt li class  nav-item  data-toggle  collapse  data-target   navbar-collapse show  gt  x000D             lt a class  nav-link  routerLink   inicio  routerLinkActive  active   gt Inicio lt  a gt  x000D           lt  li gt  x000D         lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The easiest way to do it using only Angular 2 4 template with no coding    lt nav class  navbar navbar-default  aria-expanded  false  gt     lt div class  container-wrapper  gt        lt div class  navbar-header  gt         lt button type  button  class  navbar-toggle collapsed   click   isCollapsed    isCollapsed  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 no-transition   attr aria-expanded    isCollapsed   ngClass    collapse  isCollapsed   gt         lt ul class  nav navbar-nav   click   isCollapsed    isCollapsed  gt           lt li  routerLinkActive     active     routerLinkActiveOptions    exact  true   gt  lt a routerLink     gt Home lt  a gt  lt  li gt           lt li  routerLinkActive     active    gt  lt a routerLink   about  gt About lt  a gt  lt  li gt           lt li  routerLinkActive     active    gt  lt a routerLink   portfolio  gt Portfolio lt  a gt  lt  li gt           lt li  routerLinkActive     active    gt  lt a routerLink   contacts  gt Contacts lt  a gt  lt  li gt         lt  ul gt       lt  div gt      lt  div gt   lt  nav gt

User · Answer

I am using Angular 5 with Boostrap 4  It works for me in this way    x000D   x000D     document  on  click     navbar-nav gt li gt a   navbar-brand   dropdown-menu gt a   function  e    x000D        if     e target  is  a    amp  amp    e target  attr  class       nav-link dropdown-toggle      x000D              navbar-collapse   collapse  hide    x000D          x000D          x000D       x000D   lt nav class  navbar navbar-expand-lg navbar-dark bg-primary  gt  x000D     lt a class  navbar-brand   routerLink      home    gt FbShareTool lt  a gt  x000D     lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarColor01  aria-controls  navbarColor01  aria-expanded  false  aria-label  Toggle navigation  style    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  navbarColor01  gt  x000D       lt ul class  navbar-nav mr-auto  gt  x000D         lt li class  nav-item active   ngIf   myAuthService isAuthenticated    gt  x000D           lt a class  nav-link   routerLink      dashboard    gt Dashboard  lt span class  sr-only  gt  current  lt  span gt  lt  a gt  x000D         lt  li gt  x000D         lt li class  nav-item dropdown   ngIf   myAuthService isAuthenticated    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              Manage x000D             lt  a gt  x000D             lt div class  dropdown-menu  aria-labelledby  navbarDropdown  gt  x000D               lt a class  dropdown-item   routerLink      fbgroup    gt Facebook Group lt  a gt  x000D               lt div class  dropdown-divider  gt  lt  div gt  x000D               lt a class  dropdown-item  href     gt Fetch Data lt  a gt  x000D             lt  div gt  x000D         lt  li gt  x000D       lt  ul gt  x000D   x000D       lt ul class  navbar-nav navbar-right navbar-right-link  gt  x000D           lt li class  nav-item   ngIf    myAuthService isAuthenticated     gt  x000D               lt a class  nav-link   click   logIn    gt Login lt  a gt  x000D           lt  li gt  x000D           lt li class  nav-item   ngIf   myAuthService isAuthenticated    gt  x000D              lt a class  nav-link  gt     myAuthService userDetails displayName    lt  a gt  x000D           lt  li gt  x000D           lt li class  nav-item   ngIf   myAuthService isAuthenticated    amp  amp   myAuthService userDetails photoURL  gt  x000D               lt a gt  x000D                 lt img  src    myAuthService userDetails photoURL  alt  profile-photo  class  img-fluid rounded  width  40px   gt  x000D               lt  a gt  x000D           lt  li gt  x000D           lt li class  nav-item   ngIf   myAuthService isAuthenticated    gt  x000D               lt a class  nav-link   click   logOut    gt Logout lt  a gt  x000D           lt  li gt  x000D       lt  ul gt  x000D   x000D     lt  div gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

This code simulates a click on the burguer button to close the navbar by clicking on a link in the menu  keeping the fade out effect  Solution with typescript for angular 7  Avoid routerLink problems   ToggleNavBar          let element  HTMLElement   document getElementsByClassName   navbar-toggler     0   as HTMLElement      if   element getAttribute   aria-expanded        true              element click              lt li class  nav-item   routerLinkActive     active    gt       lt a class  nav-link   routerLink     link1    title  link1   click   ToggleNavBar    gt link1 lt  a gt   lt  li gt

User · Answer

You can use a simply bind on click and close  like this   click   quot drawer close    lt a class  quot nav-link quot   routerLink   quot navItem link quot  routerLinkActive  quot selected quot   click   quot drawer close   quot  gt

User · Answer

this is the solution to close menu when click on anchor then apply this line in list item        data-target   sidenav-collapse-main  data-toggle  collapse    the real example that work for me is below         lt li class  nav-item  data-target   sidenav-collapse-main  data-        toggle  collapse   gt         lt a class  nav-link  routerLinkActive  active  routerLink   admin users  gt           lt i class  ni ni-single-02  text-orange  gt  lt  i gt  Users        lt  a gt         lt  li gt

User · Answer

add below code in your  lt  a  gt  TAG data-toggle  quot collapse quot  data-target  quot  navbar-collapse show quot   as shows below in every  TAG  lt li class  quot nav-item quot  gt      lt a class  quot nav-link quot  href  quot  about-us quot  data-toggle  quot collapse quot  data-target  quot  navbar-collapse show quot  gt About lt  a gt   lt  li gt

User · Answer

With trying out above solutions  I was missing a solution for Dropdown toggles  so here you go  Also opens submenu items   Maybe you have to tweak it a bit if your toggle class is different        navbar-nav li a   on  click   function        if     this   hasClass  dropdown-toggle                 navbar-collapse   collapse  hide

[html] How to hide collapsible Bootstrap 4 navbar on click

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to twitter-bootstrap-4