Responsive landing page HTML CSS JavaScript

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have a suggestion regarding your question that I believe will be of great interest to you.

FIXING SLIDE OUT ANIMATION 🪄:

• " give some idea's for animating slide out of the navigation menu Slide in is fine slide out have me stuck ", Well I'm here to share my thoughts with a working code!

• First, the issue lies with using animation property because the moment we click the hamburger/button the slidein class is added. It contains the animation rule so the "slide-in" works because you only defined for sliding in and not for sliding out.

• Second, You're using visibility rule for menu. So what i would like to suggest is to remove the animation "slidein" rule and add these rules,

.ss__prim-navlist {
  visibility: hidden;
  translate: 100% 0;
  opacity: 0;
  transition: .7s ease;
}

.slidein {
  visibility: visible;
  translate: unset;
  opacity: 1;
}

• Here, we first setting the nav menu on "slide-out" position which is ready to be "slide-in" whenever the class slidein added for ul. Using these rules we can achieve a smooth-in-out sliding navigation as you wished!

• Additionally we added opacity and transition to make it more visually appealing.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!