HTML & CSS How to animate navbar opening/closing on mobile?

[winstonp]

I adapted an online navbar implementation which collapses and expands on mobile, and now I would like to animate the navbar opening and closing.

Here's the HTML:

<nav>
<div id="nav-wrapper">
<button class="icon" onclick="menuBar()"><i class="gg-menu-right"></i></button>
<button onclick="darkMode()"><i class="gg-dark-mode"></i></button>
<a href="/pages/index.html">Winston Purnomo</a>
<a href="/pages/portfolio.html">Portfolio</a>
<a href="/pages/contact.html">Contact</a>
</div>
</nav>`

And here's the existing relevant CSS:

/* -- Navigation Bar. -- */
nav {
    overflow: hidden;
    position: sticky;
    top: 0px;
    background-color: #333;
    padding: 20px 20px;
    font-size: var(--nav-text);
}
....
@media screen and (max-width: 600px) {
    ....
    nav.responsive {
        position: relative;
    }
    nav.responsive .icon {
        position: sticky;
        right: 0;
        top: 0;
    }
    nav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

 

[Johna]

Can I see the function that opens/closes your navbar?
Then I can see how to help you animate it. 🙂

 

[winstonp]

Can I see the function that opens/closes your navbar?
Then I can see how to help you animate it. 🙂

Yup!

function menuBar() {
    var x = document.querySelector('nav');
    if (x.className === 'nav') {
      x.className += " responsive";
    } else {
      x.className = 'nav';
    }

I've done some further reflection on my code, and I think this is why it's hard to animate.

The nav does not change height or position on its own. The nav's 'a' links unhide themselves through pressing the menu button, which causes the navbar to expand in height. How can I tell the CSS to animate this change?

 

[Johna]

I think adding transition: 0.5s; to the nav's CSS should do the trick. (Change 0.5s to the duration you want the animation to be)