I have a problem with my responsive navigation menu. When I click on the button (took the icon from font awesome actually), my navbar appears as I wanted but it happens instantly, while I would like to appear gradually with transition. I was trying something like
.navbar {
visibility: hidden;
}
.navbar.active {
transition: visibility 1s ease;
visibility: visible;
}
and similar stuff with opacity and display (I understand why display: none and then display: flex on .active can’t be used with transition), but nothing worked out the way I wanted.
Any help please? Here is the codepen, button will appear when screen is less than 1000px: https://codepen.io/argentinaivan/pen/WNXvwKP
Forgot to mention that with visibility there was even a space, of course I didn’t want that…