Streaming live at 10am (PST)

Link shifting on hover

Hello, I can’t quite work out any my ‘all links’ link is shifting a few pixels on hover.

You can roll over the top link to see.

Thanks for any help.


Here is my site Read-Only: https://preview.webflow.com/preview/wip-evari-1?utm_medium=preview_link&utm_source=designer&utm_content=wip-evari-1&preview=a337c5b9ca0f6db633a59f3f213bc504&pageId=5f10d1ddbc4470b469d38688&mode=preview
(how to share your site Read-Only link)

I seem to have a clash somewhere with a class. It works ok on desktop but not when the mobile menu is opened.

https://preview.webflow.com/preview/wip-evari-1?utm_medium=preview_link&utm_source=designer&utm_content=wip-evari-1&preview=a337c5b9ca0f6db633a59f3f213bc504&mode=preview

Hey Nick,

here is what you should try:

  • Try to get rid of the display settings of “All links” of your navlinks on desktop (a reset will do just fine):

grafik

  • Do the same on “All links” hover state:

grafik

This will make your desktop links prevent from jumping up when hovering over them (or was that intended?).

The link shift in mobile view comes from a mismatch of line height on your navlinks in tablet/ mobile view. Normal state has a line height of 22 px while hover state has a line height set to 26px (which makes them jump on hover). Set an equal line height for both states and you will be fine.

Thank you very much Chris, will take a look.

Seems to have worked, reset a lot of odd styles. Body was clashing with all links too.

Thanks again!