Link shifting on hover

Design help General
1

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)

2

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

3

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.

grafik
grafik242×518 12.2 KB
grafik
grafik237×506 12.4 KB

4

Thank you very much Chris, will take a look.

5

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

Thanks again!