Transition on navigation menu

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…

Hey There =)

Try to add

scroll-behavior: smooth;

But that needs to be added to an HTML selector:

html{
scroll-behavior: smooth;
}

Let me know if that helps
=)

Oh, thanks, but that is not what I need, I actually added that for the remainder of my page. I just need my navbar ( https://i.imgur.com/ySF1rBS.png ) to appear and disappear with transition after clicking the button in the right upper corner.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.