Hi,
I was working on a Hamburger Interaction for my own site, where three equal lines turn into an X when clicked, and I followed this guide fairly closely when creating the interaction. My problem is that when the Hamburger is clicked, the X is formed, but it doesn’t line up perfectly.
Can someone help me figure out what I’m doing wrong? Here is my site’s read-only link. Thanks in advance!
Adjust your interaction so the top bar moves down 10px instead of 5px and the bottom bar moves up 10px instead of 5px and it lines up just fine.
That helps a lot! Does this look a little strange to you though? It’s definitely closer to meeting at the center, but maybe it’s shifted over too much / too little? Regardless, I appreciate the help!
One of them is off a bit. You adjusted them both to 10px up/down movements?
When I first posted, these were the settings:
In the screenshot in my last reply, it was set to:
Now, it’s set to:
Any other ideas? I think it might still be off.
Is there a reason those lines are 4.5px high instead of 5?
Change them both to 9px movements and it should fix it on your end but I’m thinking it will be broken on a non-retina screen.
Am I guessing correctly that you are on a retina screen?
That fixed it!
To answer both of your questions, 4.5 was just arbitrary — I can change it going forward if necessary, but the 9px movements made it look completely normal. Additionally, I’m actually not on a Retina display.
Thanks again! I really appreciate it.
You’re welcome.
That’s really weird, though. It is now broken on my screen and I can say with 99% certainty it is because of that 4.5px height. The amount that it’s “off” is incredibly slight, but it is there.
How about now on your end? The height is now 5px, and the movements are 10px.
Looks perfect now!
I’m wondering which portion of my system has problems with the half pixel. Running Chrome on Mac. If I ever run into it again I’ll have to keep that in mind.
You know, now that I’ve been looking at it a little longer, I actually think it might be a little off. I threw the screenshot in PS and put a straight line underneath the X and only 1 of the 2 lines is touching it. It’s minor, but an interesting issue. Can you send a screenshot of what it looks like for you? I’m running Chrome on a Lenovo.
–
Get ready for a wild ride.
We’ve uncovered a really weird glitch.
There were NO changes made to the code between these two screenshots, but you’ll notice that one is off by 1px and one is not.
The difference is that the one that is off is from when I initially load the project and preview it. After exiting preview mode and re-entering preview mode, the interaction runs and the lines line up perfectly. I have to reload the project as a whole and put it into preview mode to get the lines to be off again, and on subsequent previews, they line up perfectly.
@Waldo @PixelGeek or someone, can you see what I’m seeing?
Whoa — that’s super strange. I’m seeing something similar to that too, but I’d be curious to hear what Webflow staff (@Waldo @PixelGeek) has to say about the issue. (Apologies for the delay in response.)
@mattvaru sorry I thought the issue was marked as resolved, my bad! Were you having trouble with this still by chance? I think I took a peek a few days ago and noticed that the menu button or parent wasn’t set to relative position and didn’t have a defined width/height. Since the touch target doesn’t really change much from screen to screen I typically define menu buttons at a width/height of about 60px by 60px or so and make sure it’s set to relative position.
Hope that this is helpful, please let me know if you have any questions! 
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
