Navbar symbol at different pages

Hello,

Can somebody help me out with my problem?

I am building a website and made an navbar and saved it as a symbol. When I go to the published website an click on the contact page the navbar is not the same (moves a little) and i am crazing out. Cant find anyway.

(Only the contact page link works, did not go further cause i am trying to fix this)

Also the mobile version is dumbass to, i dont know what i did wrong, but i did something good wrong :frowning_face:
Here is my published website:

https://sibel.webflow.io/

Could somebody help me out, i am now trying for an hour but cant find the problem.

My regards,

Baris


Here is my site Read-Only:

https://preview.webflow.com/preview/sibel?utm_medium=preview_link&utm_source=dashboard&utm_content=sibel&preview=70aa2bac69d1a04c3201bcefd1777c66&mode=preview

Baris,

This is actually a pretty easy fix, but it can be confusing if you haven’t done it before.

Your navigation is moving because you’ve assigned a Hover State to the link blocks. When you hover, a border appears at the bottom with a width of 1px. Since the hover state is essentially a show/hide reveal for the border, your navbar is getting 1 pixel taller. You can counteract this if you set the bottom-margin for the link block to 1, then on the Hover State to 0. This will cancel out the 1-pixel addition that’s appearing from your Nav Links.

Sorry maybe i am a little noob…

Could you make a video where to fix cause nothing happens when i change margin