Search code examples
cssreactjsmernhamburger-menuframer-motion

How to fix hamburger menu animation?


I have added hamburger menu to my web application (MERN stack) for screen sizes below 500 px.

enter image description here

When I click on the hamburger menu, both the lines should animate to a cross, which is happening. However, the two menu lines remain on the screen as well. Why is it happening?

enter image description here

I am using framer motion for menu animation. GITHUB REPO: https://github.com/sundaray/hamburger_menu


Solution

  • You have two Hamburger components in your app. One in App.js and one in Header.js.