Collapsed navbar navpill links are all in active state

[haraldpdl]

Bootstrap 4.0.0-beta1

Navpill links in a navbar are all displayed in an active state when collapsed. Tested with Edge/Firefox/Chrome. Example:

https://www.bootply.com/VAyFaYVO64

(please click on the mobile icon to show the collapsed view)

[haraldpdl]

It worked fine with 4.0.0-alpha6:

https://www.bootply.com/GlyaAISMhM

[Johann-S]

Not sure if it's a JavaScript issue or not but it can be

[danijelGombac]

I think is related to this .collapse.show:

bootstrap/dist/css/bootstrap.css

Lines 3194 to 3198 in 7b873fa

	.nav-pills .nav-link.active,
	.show > .nav-pills .nav-link {
	color: #fff;
	background-color: #007bff;
	}

[pat270]

#22513 will probably fix this.

[insad]

Solved the problem by patching _nav.scss:

//
// Pills
//

.nav-pills {
  .nav-link {
    @include border-radius($nav-pills-border-radius);

    &.active,
    .show > &.active { /* Patch */
      color: $nav-pills-link-active-color;
      background-color: $nav-pills-link-active-bg;
    }
  }
}

[mrjack88]

I am running into the same issue, when nav-bar collapses, all nav-pills are shown as active, and then when returned to a size bigger than md all nav-pills are active. Here is the sample code: https://codepen.io/mrjack88/full/qPXGaq/. Do you think i should grab alpha version, where it seems to work right according to this thread in the top?
PS. I am using 4.0.0-beta from CDN

[insad]

Simply download the latest development version and host it on your own server instead of using CDN... this problem and many others will be gone away...