Search code examples
htmlcssmedia-queries

Transition will not apply to height when browser resizes

When I resize the browser and the width goes either below 1001px or above 1000px, I want the nav's height to gradually change. Instead, it snaps to the new height. Any ideas?

nav.cust-navbar {
    -webkit-transition: height 2s;
    transition: height 2s;           
}


@media(max-width:1000px) {

    nav.cust-navbar {
        height: 94px;
    }

}
Solution

  • You need to set the navbar's height, because the initial value is auto. Try to give it a fixed or percentage height so it can transition between them.

    ex:

    nav.cust-navbar {
    height: 300px;// or height: 20%
    -webkit-transition: height 2s;
    transition: height 2s;           
}