Hi everyone,
I have an hamburger animation for mobile view consisting of three lines. on click one of them disappears. the other two form an x, and then the whole button rotates 180 degrees.
But somehow the lines always align differently and I haven’t been able to figure out what’s going on. Sometimes the X is nicely aligned and centered as it should be. Sometimes it looks its misaligned in one direction, sometimes in the other?
Here is how it should look like, always:
And here is how it looks randomly:
Does anyone have an idea how to fix this?
See it live here:
http://heronics.webflow.io/
And here is the read-only-link: https://preview.webflow.com/preview/heronics?preview=c8ad153f24af51428978e875a724e320