Bootstrap 4 collapsible navbar using pills

Question

Hello I have tried to create a Bootstrap 4 responsive navbar using pills. The problem is that when the navbar collapses, and the toggler button is clicked, all pills appears selected. Here is the code:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <!--Navigation bar-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav nav-pills ml-auto">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>    
  </div>
</nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

See what happens? All items are shown as selected.

Possible duplicate of [Bootstrap navbar Active State not working](https://stackoverflow.com/questions/24514717/bootstrap-navbar-active-state-not-working) — Dan, Oct 04 '17 at 14:42

score 0 · Answer 1 · answered Oct 04 '17 at 14:24

0

Take out the navbar-nav in your 'ul' and replace it with just nav

answered Oct 04 '17 at 14:24

Dan

451
3
13

Still the same, when collapsed, and dropdown, all pills are shown as active – Oscar Cabrera Rodríguez Oct 04 '17 at 14:28
The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling. Just found this, I guess they don't do .active anymore?? – Dan Oct 04 '17 at 14:30
I guess write your own active class and some js to toggle it on clicks – Dan Oct 04 '17 at 14:30
I guess that would do the trick, but a thing so simple as that should have zero complexity – Oscar Cabrera Rodríguez Oct 04 '17 at 14:33
Yeah I don't know why they would take that out and still use it I their examples? – Dan Oct 04 '17 at 14:33
Bootstrap 4 requires any .active class to be applied to the element. Just found this too. When you switch navbar-nav did you have the .active on the 'a'? – Dan Oct 04 '17 at 14:35
do you mention an example? can i see it? – Oscar Cabrera Rodríguez Oct 04 '17 at 14:36
$(".nav a").on("click", function(){ $(".nav").find(".active").removeClass("active"); $(this).parent().addClass("active"); }); – Dan Oct 04 '17 at 14:38
https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navs.cfm – Dan Oct 04 '17 at 14:38
Wait, problem is when navbar collpases, and the toggle button is clicked, all
are shown as active, understand, it is not on the click event that all gets active

Oscar Cabrera Rodríguez

Oct 04 '17 at 14:41

score 0 · Accepted Answer · answered Oct 16 '17 at 16:56

0

OK this is a reported issue on Bootstrap 4.0.0-beta1. The number of the issue is: #23482. Grab the last build from github should do the trick.

answered Oct 16 '17 at 16:56

Oscar Cabrera Rodríguez

211
2
14

Bootstrap 4 collapsible navbar using pills

2 Answers2