[Resolved] Animated Hamburger Icon

[Andy]

Hi,

I used the instructions in the following thread to create a custom animated hamburger icon:https://generatepress.com/forums/topic/animated-hamburger-icon/

I have it working correctly, except the open icon is not in the same position as the close icon, as they are in the demos here:https://jonsuh.com/hamburgers/

I think it’s something to do with the flexbox CSS used in the header but can’t figure out exactly the cause.

Any help much appreciated.

[Andy]

ok, I almost have them positioned correctly now, the old menu was pushing the closed icon out of position. However, there is still some slight visible vertical movement when the icon transitions from open to close and vice-versa. Tried playing around with positioning values but just can’t get it as accurate as on the demo site.

[Tom]

Strange, it looks like the actual hamburger and close icon are perfectly aligned. Is it only when the lines are transitioning to the X that the weirdness happens?

[Andy]

Yeh in the transition it just appears to move more than in the demo version. Maybe it’s just an optical illusion, does it look right to you?.

[Tom]

I can kind of see what you mean, although I’m not exactly sure how to fix it.

Does the same kind of thing happen if you use a different style?

[Andy]

I’ve changed it to slider now and it doesn’t seem to have the same issue. I think it must be because I changed the spacing between the bars on the previous one. Would really prefer the bars closer together though.

[Tom]

Ah, so you brought the bars closer together? What CSS did you use?

[Andy]

This is all the CSS I had applied to it:

.menu-toggle .hamburger { padding:0;  }

.hamburger .hamburger-box { width:25px; }

.hamburger .hamburger-inner, .hamburger .hamburger-inner::before, .hamburger .hamburger-inner::after { width:23px; height:2px; }

.hamburger .hamburger-inner::before { top:-6px; }

.hamburger.hamburger--collapse .hamburger-inner::after { top:-12px; }

.hamburger--collapse.is-active .hamburger-inner { bottom:-3px; }

[Tom]

Hmm, I assume it’s the negative values. Is the current animation the one you want to stick with?

[Andy]

Yes I think we’ll stick with this slider animation.

[Tom]

What about this?:

.hamburger--slider:not(.is-active) .hamburger-inner::before {
    top: 7px;
}

.hamburger--slider:not(.is-active) .hamburger-inner::after {
    top: 14px;
}

.hamburger--slider:not(.is-active) .hamburger-inner {
    top: 6px;
}

[Andy]

Thank you, looks good I think, what do you think?

[Tom]

Much better for sure 🙂

[Author]

Posts