CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4
Dave
Dave

Reputation: 2018

Why my transition doesn't work on bootstrap nav?

Why my class toggle is strict without any transition effect even though I added transition: 0.5s? It doesn't work on my bootstrap website. Whenever I try to test it on custom div on jsfiddle site then it works fine. https://jsfiddle.net/dawid1798/5goyjwx0/3/

window.addEventListener('scroll', function() {
    var header = document.getElementById("navbar");
    header.classList.toggle("fixednav", window.scrollY > 100);
});

.fixednav {
    transition: 0.5s;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999;

}

Upvotes: 2

Views: 67

Answers (1)

Ivana Bakija
Ivana Bakija

Reputation: 354

When nav loses class .fixednav it also loses the transition property.

Put it on .nav:

.nav {
  width: 100%;
  height: 250px;
  background: red;
  transition: 0.5s;
}

Also check if bootstrap is loaded into the project and that you aren't disabling the transition with your css.

Upvotes: 1

Related Questions