I added an animation to the existing Hamburger Menu Icon. When you click on it the menu opens and it turns from three lines to X, then when you click on it again the menu closes and it turns to three lines back.
The code that I inserted is a follows:
/*Menu icon change on click */
transition: all 200ms ease-in-out;
box-shadow: 0 10px 0 #fff;
box-shadow: 0 0 0 #fff;
transform: translateY(10px) rotate(45deg);
transform: translateY(-10px) rotate(-45deg);
- First problem that I have is the position of the icon, that is not aligned (in center) with my logo text, as it was before I added the code.
I left the first part of code opened to insert the icon positioning:
and it didn´t help.
- Second problem is when testing the changed menu icon I have also noticed, that if the site is not fully opened, when I click on the menu icon it changes from lines to X but the menu does not open (tested on mobile). Could this be my code problem?
Thank you for your help & Best regards,