Streaming live at 10am (PST)

Menu Animation - BG Issue

Hi everyone!

I’m struggling create something that seemed simple at the first look. Trying to create the animation below for a client:

The thing is that the origin point of the expanding BG circle is the same as the hamburger icon - that’s positioned absolute to the container. But the circle itself (the yellow div I’m testing) is position:absolute to the Body.

That means the circle will have a different origin point depending on the browser size. Is that a way to avoid that and make it fixed?

Here is my public share link: LINK
(how to access public share link)

Thank you so much!

I’m not seeing the expanding circle element on your project, did you happen to remove it after creating the post?

Hi @mikeyevin,

Thanks for the reply. I’m working on the project now trying another workaround for it… any ideas?

I don’t think you’ll have an issue with your original idea, however without seeing how you’ve got it setup I can’t say for sure.

As long as your element has a parent that’s position: relative and it’s set to position: absolute it should be basing its position off the parent—regardless of what Webflow shows in the Designer. I feel like I occasionally see it incorrectly show that it’s basing its position off the body when it’s not :man_shrugging:

1 Like

Hey @mikeyevin, you’re right.

I tried to use position:absolute on the circle background DIV inside the container and it worked. For the purpose of the animation the DIV considered the whole body and not only the container.

1 Like

Now what is happening is that it works great in the preview, but not in the published website: https://lemon-rebrand.webflow.io/

UPDATE: It actually worked! But I was so happy that I forgot to thy the published website and the craziest thing is happening:

The menu works perfectly in the preview and Responsive Viewer but not on normal Chrome or Safari. Any ideas?