Hey guys,
Im very new in web design, I’m creating a little 3D studio for my self and I wanted to have full control of the page as I would need to update it very often.
I’m happy about my design as I want something very simple but I found my self stuck with the Navbar interaction. It’s working completely fine in the designer but once is live when I press the part of the contacts all my Navbar it just move slightly to the right and I find it very annoying and incosistent as in all the other pages works just fine.
I tried to copy one of the pages and recreate there again the part of the contacts a few times and always with the same result.
I run out of ideas and I was wondering if someone found the same issue or somebody can help me a bit with that.
As I said my level in webflow is not advanced at all.
Thank you in advance guys.
The page it’s already live here :
Hello
I think I found the issue.
First you need to click on Contact in preview mode in webflow.
After that in the designer you will see that with the class of the navbar link you will have a green class added which the current state (see the picture attached).
And here you can see that you have a margin of -3.
So when you click on Contact it will automatically apply the -3 margin
To fix your problem you need to put back the margin to 0.
Hey Louis,
Thank you for your fast reply. I tried but seems that the issue persist.
I tried several times with the margin options but even then the navbar still having the same issues.
Even when I duplicate a page of the ones that are working fine and I link it to the contacts, once i publish it the problem still there.
Maybe I did something in a previos step that I messed it up.
Thanks for the tip im just starting to learn webflow world.
Anyway…thank you for trying Louis, much appraciated.
I was going to suggest doing the same as Louis already did. After you removed the negative margin on :active, everything on your live site looks fine to me.
Try opening your site in an incognito tab or clear your cache and check if the issue persists.
Also: Always add a class before making any changes to an element. This will avoid having classes like “Nav Link 18”, “Nav Link 19” etc. This is considered bad practice and makes your life a lot harder. Create one class for all links. If you want to change one link (Example: Remove padding-right, as it’s the last item), add a combo-class. For example: navbar__link + is–last-item
Take it easy though. I used to make the same mistakes in the beginning. Figuring all of this out, takes some time. Good luck!
You are right! After I clear up the cache of my browser it works fine!!
Sorry my ignorance in terms of web design…very new in all the concepts of clear caches of browsers and all this stuff… Need to put more time on it.
Anyway guys, thank you a lot Louis and Julian to take the time of teaching me some usefull stuff!!
Don’t worry about it. This is part of the process. It can be annoying and frustrating at times but also very rewarding if things work out. You’re welcome!
im just starting to learn webflow world.