One menu item jumps 2 pixels

HI weflowters

I have just launched this site for a customer www.wexo.dk but when you click the last topmenuitem “kontakt os” (and only this one) its like the whole topmenu is dropping 2 pixels… I have tried everything but cant figure out what is wrong.

I am looking very much forward to your help, thanks

Kim


Here is my public share link:
https://preview.webflow.com/preview/wexo2018?preview=6747bf140b9894cefdc99e452764357a

Hi @KimHougaard

You have a focused state on the Navlinks as well as the current state, which isn’t doing anything. Remove the focused state.

On the current state, the padding is changing to 4px from 6px (see GIF below) which is seemingly what’s causing your jump. I can’t test properly as it’s not as smooth as the published site when switching from page to page.

Ensure the padding is the same on the Navlink and Current Navlink. If you’ve done this to counter for the 2px border at the bottom, then just give the navlink a fixed pixel height instead.

CloudApp

Hope this helps.

Thank you, but I actually already saw this and tried to fix it, but that is not it… now I have set it to 6 pix in both states and as you can see it is still a problem (www.wexo.dk)… And if it was the case it should be a problem on all the menuitems and not just the “kontakt os”… Also notice that the payoff after the logo also move a few pixels when the last menuitem is pressed.

Kim

Did you try adding the fixed height to the navlink? 60px fixes the problem, although I tested this without the focussed state.

The problem seems to lie with the focus state + current state. I’m not sure wether it’s applying both perhaps? Either way, the focused state is unnecessary in this case.

Just tried that, and its still the same ;-(

Kim

OK, so this is weird…

I’ve just removed all hover and focused states on the navlink to see if there was some padding, or something I have missed, and it’s still happening.

What I’ve found, is that even though I’ve removed those states, the text is still changing colour.
Where is this hover effect being inherited from? :man_shrugging:
It’s not a legacy interaction, it’s not IX 2.0 and it’s not a state.
see the video.

CloudApp

Find the answer to this and you’ve probably found the answer to the 1-2px movement. Do you have custom code on the site perhaps?

Professors @Waldo @mistercreate - are you free/able to take a look ?

1 Like

Great question, and I’m happy to help! And thanks for letting me know @StuM :blush:

It took a lot of digging, but I was able to notice that the line-height changes as you can see in the following short screencapture: Screen Recording 2018-05-29...

This would definitely be the cause of the jumping.
CloudApp

Feel free to update the line height to 20px to match, and the jumping should no longer occur.

3 Likes

Yes! Thank goodness someone found this out… it was driving me crazy so I’m sure @KimHougaard will be grateful for your time! @mistercreate :smile:

1 Like

Thank you so much @mistercreate that did the trick :+1:
I am happy :wink:
But I still dont understand how it can be different from pages to pages when the navigation i a symbol?

Kim