Elements flickering when hovered

Design help General
1

Hello,

I’m in need of some help with my mobile navigation bar I created. A few days ago, this mobile nav (which only appears on tablet, landscape phone, and portrait phone) worked perfectly and had no hover effect.

However, recently, whenever I hover over the “Story” button or “Services” button on the homepage, the buttons have started to move and flicker. This is also an issue on other pages as well. I have not changed anything in the Style tab for this particular class, and it doesn’t appear to have any layout or position changes in the hover state.

I’m at a loss to what is causing this issue. I tried to see if there was a div block with position absolute over top, but all div blocks with this position should be disabled in tablet or phone view.

If you need anymore information, let me know. I would greatly appreciate your help! Here’s the read-only link: https://preview.webflow.com/preview/ianefford?utm_medium=preview_link&utm_source=designer&utm_content=ianefford&preview=7af48326265548fdfdb282faa31e889c&workflow=preview

Here is my site Read-Only: LINK

2

Hey, the problem is that you set for all link elements (starting from Desktop breakpoint) width: auto; for the :hover state, just delete “Auto” and all be works as needed👌

image
image446×1320 133 KB

3

Hi Dmitrii! I tried deleting Auto for all links and ensuring that the width I have set for the element is also reflected in the hover state, but neither of these changes fixed the problem. The width seems to be changing, but it stays the same for hover.

I appreciate your help!

1 Like
4

Now your website is working as it should, for me… Perhaps we are talking about different problems now? Can you show the problem by recording a video of the screen?

5

I was able to get it working. I misunderstood what you highlighted in your original message - I didn’t know that I had to select the desktop view to remove the width setting.

Thank you for your help! I apologize for the confusion.