Right now on small screen the navbar will show, and whenever you click it, the list items will jump out.
How do I add a transition where it can be displayed at a certain speed?
Like the bootstrap navbar dropdown.
I don’t think you can animate display property, so when display value of your menu items changes to “block”, causing them to stack on top of each other, that change can only be instantaneous. You can do what you want with transform property, with translateY() or scaleY() function. You can control the speed of transform with transition property, like so: transition: transform 1s ease-out.
Here’s one implementation of that mobile menu effect, from Kevin Powell: