Bootstrap navbar Active State not working

Question

I have bootstrap v3   I use the class  active  on mynavbar and it does not switch when I press menu items   I know how to do this with jQuery and build a click function but I m thinking this functionality should be included in bootstrap   So maybe it is a JavaScript issue   Here is my header with my js css bootstrap files I have included    lt  -- Bootstrap CSS -- gt   lt link rel  stylesheet  href    bootstrap css bootstrap css    gt   lt link rel  stylesheet  href    ajax googleapis com ajax libs jqueryui 1 10 4 themes smoothness jquery-ui css    gt   lt link rel  stylesheet  href    stylesheets styles css    gt    lt  --jQuery -- gt   lt script src    ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt   lt script src    ajax googleapis com ajax libs jqueryui 1 10 4 jquery-ui min js  gt  lt  script gt    lt  -- Bootstrap JS -- gt   lt script src   bootstrap js bootstrap min js  gt  lt  script gt   lt script src   bootstrap js bootstrap-collapse js  gt  lt  script gt   lt script src   bootstrap js bootstrap-transition js  gt  lt  script gt    Here is my navbar code    lt nav class  navbar navbar-default navbar-fixed-top  role  navigation  gt           lt div class  container-fluid  gt               lt div class  navbar-header  gt                   lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbarCollapse  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   index php  gt MyBrand lt  a gt               lt  div gt                lt div class  collapse navbar-collapse navbarCollapse  gt                   lt ul class  nav navbar-nav navbar-right  gt                       lt li class  active  gt                           lt a href   index php  gt Home lt  a gt                       lt  li gt                        lt li gt                           lt a href   index2 php  gt  Links lt  a gt                       lt  li gt                        lt li gt                           lt a href   history php  gt About lt  a gt                       lt  li gt                       lt li gt                           lt a href   contact php  gt Contact lt  a gt                       lt  li gt                        lt li gt                           lt a href   login php  gt Login lt  a gt                       lt  li gt                   lt  ul gt               lt  div gt           lt  div gt       lt  nav gt    Am I setting this up right    On an unrelated note  but possible related  When the menu goes mobile  I click the menu button and it collapses   Pushing it again does not un-collapse it though   So this issue   with the other  both signify wrong JavaScript setup perhaps

User · Answer

I m using bootstrap bare theme  here is the sample navbar code  Note the class name of the element -   nav  - as this is referred in java script     Collect the nav links  forms  and other content for toggling      bs-example-navbar-collapse-1 collapse navbar-collapse        ul nav navbar-nav          li            a  href   gt    demo one   Page One          li            a  href   gt    demo two   Page Two          li            a  href   gt    demo three   Page Three   in the view page  or partial  add this  javascript   this needs to be executed every time page loads   haml view snippet -   - content for  javascript do    javascript         function                  each     nav   find  li    function                     this  toggleClass  active                       this  find  a   attr  href      window location pathname                             In the javascript debugger make sure you have value of  href  attribute matches with window location pathname  This is slightly different than the solution by  Zitrax which helped me fixing my issue

User · Answer

I ve been struggling with this today  data-togle only worked if I m on a single page application    I m not using ajax to load the content i m actually making post request for other pages so the first js script was useless too  I solve it with this lines   var active   window location pathname      nav a href       active         parent   addClass  active

User · Answer

I m hope this will help to solve this problem         var navlnks   document querySelectorAll   nav a            Array prototype map call navlnks  function item                 item addEventListener  click   function e                     var navlnks   document querySelectorAll   nav a                      Array prototype map call navlnks  function item                         if  item parentNode className     active     item parentNode className     active open                               item parentNode className                                                                      e currentTarget parentNode className    active

User · Answer

You have included the minified Bootstrap js file and collapse transition plugins while the docs state that      Both bootstrap js and bootstrap min js contain all plugins in a single file     Include only one    and     For simple transition effects  include transition js once alongside   the other JS files  If you re using the compiled  or minified    bootstrap js  there is no need to include this   it s already there    So that could well be your problem for the minimize problem    For the active class  you have to manage it yourself  but it s just a line or two   Bootstrap 3       nav a   on  click   function           nav   find   active   removeClass  active         this  parent   addClass  active          Bootply  http   www bootply com IsRfOyf0f9  Bootstrap 4       nav  nav-link   on  click   function           nav   find   active   removeClass  active         this  addClass  active

User · Answer

I had to go a step forward because my file names were not the same as my nav bar titles   i e  my first nav bar link was HOME but the file name is index    So just grab the pathname and match it   Obviously this is a crude example and could be more efficient but it is highly custom need   var loc path   location pathname     li active   removeClass  active       if loc path includes  index            li  eq 0    addClass  active     else if loc path includes  blog            li  eq 2    addClass  active     else if loc path includes  news            li  eq 3    addClass  active     else if loc path includes  house            li  eq 4    addClass  active

User · Answer

Bootstrap 4  navbar Active State working  just use  navbar-nav  nav-link classes  x000D   x000D     function           this will get the full URL at the address bar   var url   window location href       passes on every  a  tag       navbar-nav  nav-link   each function             checks if its the same on the address bar     if  url     this href             this  closest  li   addClass  active            for making parent of submenu active         this  closest  li   parent   parent   addClass  active                    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  integrity  sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW dAiS6JXm  crossorigin  anonymous  gt    lt script src  https   code jquery com jquery-3 2 1 slim min js  integrity  sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr rE9 Qpg6aAZGJwFDMVNA GpGFF93hXpG5KkN  crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs popper js 1 12 9 umd popper min js  integrity  sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q  crossorigin  anonymous  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  integrity  sha384-JZR6Spejh4U02d8jOt6vLEHfe JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl  crossorigin  anonymous  gt  lt  script gt    lt nav class  navbar navbar-expand-lg navbar-light bg-light  gt     lt a class  navbar-brand  href     gt Navbar lt  a gt     lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarSupportedContent  aria-controls  navbarSupportedContent  aria-expanded  false  aria-label  Toggle navigation  gt       lt span class  navbar-toggler-icon  gt  lt  span gt     lt  button gt      lt div class  collapse navbar-collapse  id  navbarSupportedContent  gt       lt ul class  navbar-nav mr-auto  gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Home lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link lt  a gt         lt  li gt         lt li class  nav-item dropdown  gt           lt a class  nav-link dropdown-toggle  href     id  navbarDropdown  role  button  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt            Dropdown          lt  a gt           lt div class  dropdown-menu  aria-labelledby  navbarDropdown  gt             lt a class  dropdown-item  href     gt Action lt  a gt             lt a class  dropdown-item  href     gt Another action lt  a gt             lt div class  dropdown-divider  gt  lt  div gt             lt a class  dropdown-item  href     gt Something else here lt  a gt           lt  div gt         lt  li gt         lt li class  nav-item  gt             lt a class  nav-link  href     gt Other lt  a gt         lt  li gt       lt  ul gt       lt form class  form-inline my-2 my-lg-0  gt         lt input class  form-control mr-sm-2  type  search  placeholder  Search  aria-label  Search  gt         lt button class  btn btn-outline-success my-2 my-sm-0  type  submit  gt Search lt  button gt       lt  form gt     lt  div gt   lt  nav gt  x000D   x000D   x000D

User · Answer

With version 3 3 4 of bootstrap  on long html pages you can refer to sections of the pg  by class or id to manage the active navbar link with spy-scroll with the body element      lt body data-spy  scroll  data-target  spy-scroll-id  gt    The data-target will be a div with the id  spy-scroll-id        lt div id  spy-scroll-id  class  collapse navbar-collapse  gt         lt ul class  nav navbar-nav  gt           lt li class  active  gt  lt a href   topContainer  gt Home lt  a gt  lt  li gt           lt li gt  lt a href   details  gt About lt  a gt  lt  li gt           lt li gt  lt a href   carousel-container  gt SlideShow lt  a gt  lt  li gt         lt  ul gt       lt  div gt    This should activate links by clicking without any javascript functions needed and will also automatically activate each link as you scroll through the corresponding linked sections of the page which a js onclick   will not

User · Answer

Add this JavaScript on your main js file         navbar a   on  click   function              navbar   find   active   removeClass  active            this  parent   addClass  active

User · Answer

Here was my solution for switching active pages    document  ready function          li active   removeClass  active         a href      location pathname         closest  li   addClass  active

User · Answer

With Bootstrap 4 you can use this     document  ready function           document  on  click     nav-item a   function  e              this  parent   addClass  active   siblings   removeClass  active

User · Answer

I ve been looking for a solution that i can use on bootstrap 4 navbars and other groups of links   For one reason or another most solutions didn t work especially the ones that try to add  active  to links onclick because of course once the link is clicked if it takes you to another page then the  active  you added won t be there because the DOM has changed  Many of the other solutions didn t work either because they often did not match the link or they matched more than one   This elegant solution is fine for links that are different ie  about php  index php  etc       function           nav a href       location pathname split      2          addClass  active          However when it came to the same links with different query strings such as index php tag a  index php tag b  index php tag c it would set all of them to active whichever was clicked as it s matching the pathname not the query as well   So i tried this code which matched the pathname and the query string and it worked on all the links with query strings but when a link like index php was clicked it would set the similar query string links active as well  This is because my function is returning an empty string if there is no query string in the link  again just matching the pathname     function           nav a href       location pathname split      2    returnQueryString location href split      1           addClass  active            returns a query string if there  else an empty string    function returnQueryString  element       if  element     undefined        return        else       return       element      So in the end i abandoned this route and kept it simple and wrote this       navbar a   each function index  element          console log index  -  element href         console log location href           look at each href in the navbar         if it matches the location href then set active       if  element href     location href             console log  ---------MATCH ON   index   --------              element  addClass  active                It works on all links with or without query strings because element href and location href both return the full path  For other menus etc you can simply change the parent class selector  navbar  for another ie       footer a   each function index  element       One last thing which also seems important and that is the js  amp  css library s you are using  however that s another post perhaps  I hope this helps and contributes

User · Answer

For AngularJS  you can use ng-class with a function like this   HTML -    lt nav class  navbar navbar-default  ng-controller  NavCtrl as vm  gt     lt div class  container  gt       lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt         lt ul class  nav navbar-nav   gt           lt li ng-class  vm Helper UpdateTabActive  Home    gt  lt a href     ng-click gt Home lt  a gt  lt  li gt           lt li ng-class  vm Helper UpdateTabActive  About    gt  lt a href   about  gt About lt  a gt  lt  li gt           lt li ng-class  vm Helper UpdateTabActive  Contact    gt  lt a href   contact  gt Contact lt  a gt  lt  li gt                 lt  ul gt       lt  div gt   lt  nav gt    And controller     app controller  NavCtrl      scope   function  scope        var vm   this      vm Helper             UpdateTabActive  function sTab               return window location hash  amp  amp  window location hash toLowerCase              sTab  toLowerCase      active                                   If you are using  location  then there won t be hash  So you can extract the required string from URL using  location  Following will not work in all cases --   Using a scope variable like following will work only when clicked  but if the transition is done using  state transitionTo or window location or manually updating the URL  the Tab value will not be updated   lt ul class  nav navbar-nav  ng-init  Tab  Home   gt      lt li ng-class  Tab     Home     active        gt  lt a href     ng-click  Tab    Home   gt Home lt  a gt  lt  li gt      lt li ng-class  Tab     About     active        gt  lt a href     ng-click  Tab    About   gt About lt  a gt  lt  li gt   lt  ul gt

User · Answer

All you need to do is simply add data-toggle  tab  to your link inside bootstrap navbar  like this     lt ul class  nav navbar-nav  gt     lt li class  active  gt  lt a data-toggle  tab  href     gt Home lt  a gt  lt  li gt     lt li gt  lt a data-toggle  tab  href     gt Test lt  a gt  lt  li gt     lt li gt  lt a data-toggle  tab  href     gt Test2 lt  a gt  lt  li gt   lt  ul gt

User · Answer

the next answer is for those who have a multi-level menu   var url   window location href   var els   document querySelectorAll   dropdown-menu a    for  var i   0  l   els length  i  lt  l  i          var el   els i       if  el href     url           el classList add  active           var parent   el closest   main-nav       add this class for the top level  li  to get easy the parent        parent classList add  active

User · Answer

Class  active  is not managed out of the box with bootstrap   In your case since you re using PHP you can see   How add class   39 active  39  to html menu with php  to assist you with a method of mostly automating it

User · Answer

Bootstrap 4 solution that worked for me     document  ready function       You can name this function anything you like function activePage      When user lands on your website location pathname is equal to     and in    that case it will add  active  class to all links   Therefore we are going to remove first character     from the pathname   var currentPage   location pathname    var slicedCurrentPage   currentPage slice 1     This will add active class to link for current page       nav-link   removeClass  active         a href       location pathname         closest  li   addClass  active      This will add active class to link for index page when user lands on your website      if  location pathname                       a href   index     closest  li   addClass  active              Invoke function activePage          This will only work if href contains location pathname   If you are testing your site on your own pc  using wamp  xampp  lamp  etc     and your site is located in some subfolder then your path is actually   somefolder something php   so don t get confused   I would suggest if you are unsure to use following code so you can make sure what is the correct location pathname     document  ready function       alert location pathname

User · Answer

document  ready function                     var url   window location href                     a href   quot   url   quot     addClass  quot active quot

User · Answer

As someone who doesn t know javascript  here s a PHP method that works for me and is easy to understand   My whole navbar is in a PHP function that is in a file of common components I include from my pages   So for example in my  index php  page I have        lt  php     calling file   basename   FILE        include  my common includes php         Going to use my navbar function  my navbar     my navbar  calling file         Call the navbar function    gt    Then in the  my common includes php  I have      lt  php    function my navbar  calling file                All your usual nabvbar code here up to the menu items       if   calling file   index php         echo   lt li class  nav-item active  gt         else      echo   lt li class  nav-item  gt            echo   lt a class  nav-link  href  index php  gt Home lt  a gt   lt  li gt          if   calling file   about php         echo   lt li class  nav-item active  gt         else      echo   lt li class  nav-item  gt            echo   lt a class  nav-link  href  about php  gt About lt  a gt   lt  li gt          if   calling file   galleries php         echo   lt li class  nav-item active  gt         else      echo   lt li class  nav-item  gt            echo   lt a class  nav-link  href  galleries php  gt Galleries lt  a gt   lt  li gt              etc for the rest of the menu items and closing out the navbar            gt

User · Answer

This worked perfectly for me  because  window location pathname  also contains data before the real page name  e g  directory page php  So the actual navbar link will only be set to active if the url contains this link     document  ready function           each     navbar   find  li    function               this  toggleClass  active                window location pathname indexOf   this  find  a   attr  href     gt  -1

User · Answer

I tried about first 5 solutions and different variations of them  but they didn t work for me   Finally I got it working with these two functions       document  on  click     nav-link   function              nav-item   find   active   removeClass  active          document  ready function            a href      location pathname         closest   nav-item   addClass  active

User · Answer

Bootstrap 4 requires you to target the li item for active classes  In order to do that you have to find the parent of the a  The  hitbox  of the a is as big as the li but due to bubbeling of event in JS it will give you back the a event  So you have to manually add it to its parent        set active navigation after click       nav-link   on  click    event    gt            navbar-nav   find   active   removeClass  active          event target  parent   addClass  active

User · Answer

For bootstrap mobile menu un-collapse after clicking a item you can use this      ul nav navbar-nav li a   click function                  navbar-collapse   removeClass  in

User · Answer

If you don t use anchor links  you can use something like this     document  ready function            each     navbar   find  li    function               this  toggleClass  active                       this  find  a   attr  href      window location pathname

User · Answer

This elegant solution did the trick for me  Any new ideas suggestions are welcome      document   on   click     nav-list li   function   e            this   addClass   active    siblings   removeClass   active            You can use jQuery s   siblings    method to keep only the accessed item active and its siblings inactive

User · Answer

I had some pain with this  using a dynamically generated list items - WordPress Stack   Added this and it worked      document  ready function              current-menu-item   addClass  active          Will do it on the fly

User · Answer

I use this  It s short  elegand and easy to understand     document  ready function            a href       location pathname         addClass  active

User · Answer

when use header php for every page for the navbar code  the jquery does not work  the active is applied and then removed  a simple solution  is as follows  on every page set variable  lt  php  pageName    index     gt  on Index page and similarly   lt  php  pageName    contact     gt  on Contact us page  then call the header php  ie the nav code is in header php   lt  php include  header php     gt   in the header php ensure that each nav-link is as follows   lt a class  nav-link  lt  php if   page name     index    echo  active      gt  href  index php  gt Home lt  a gt    lt a class  nav-link  lt  php if   page name     contact    echo  active      gt  href  contact php  gt Contact Us lt  a gt   hope this helps cause i have spent days to get the jquery to work but failed    if someone would kindly explain what exactly is the issue when the header php is included and then page loads    why the jquery fails to add the active class to the nav-link

[javascript] Bootstrap navbar Active State not working

Examples related to javascript

Examples related to html

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3