Tabs menu button position "jumping" around

Hi all,

I’m encountering this issue that really only started happening with mobile optimization where the buttons in my tab menu keep jumping around on hover. I do have a hover animation set up for desktop breakpoints, and that still works, but it’s accompanied by this weird, jumping action that I know I didn’t put in manually. I checked the padding and margin on all the tabs to make sure they were the same, and it’s the same for all the breakpoints (I think). Any ideas? This happens in the published site as well.

Thanks!

Here’s the read-only link for my site: https://preview.webflow.com/preview/lightmark-demo-d92d182a986965c3f80c7fca?utm_medium=preview_link&utm_source=designer&utm_content=lightmark-demo-d92d182a986965c3f80c7fca&preview=25047b5faf1a1af9474c1577b4f2f969&mode=preview

And here’s the live site (url is just the webflow url for right now, we’ll change that after we’re done testing): https://lightmark-demo-d92d182a986965c3f80c7fca.webflow.io/

And lastly, here’s a loom recording so you can see what I’m talking about: Loom | Free Screen & Video Recording Software | Loom

Hi @ansa it seems you’re applying hover states on the tab class that affects the width when you hover over it.

Only remove the “45px” from the desktop version hover state of the class tab .

1 Like

Thanks so much! That solved it. :slight_smile: