Navbar shows different on live website

Hello everyone

My navbar shows a little bigger on my live website than in the designer. I tried to inspect those elements but I can’t seem to find the problem.

Is there anyone who could help me?

Thanks in advance

Kind regards
Lukas :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/kfc-aarsele?utm_medium=preview_link&utm_source=designer&utm_content=kfc-aarsele&preview=d65ea20a07e8e5984f18a43f4df5921b&workflow=preview

(how to share your site Read-Only link)

Hi @Lukas_Vandaele

Your navbar width is relative to the window width (15/17vw).
In the designer, the window width is narrower than in live view so the navbar would display in different width. (remember that vw also includes the scrollbar wich is about 15-17px not just the viewable window width like in %)
You can apply the navbar with a non-width dependent units (px/rem/vh…)
or add a max-width (for example: 300px) to control the width expansion.

Hi Shay

Thank u for your quick reply! Nevertheless I think there is a problem with the height of my navbar, doesn’t it? Because my logo and social media links are not fully displayed on the live website.

Kind regards
Lukas

I can’t view the live site so I can’t actually see the problem.
but if you mean it’s cut off like in the pic you attached above,
then try changing the margins spacing the logo, menu, icons
to VH units instead of the fixed px units. that way the spacing will be reduced according to the window size. (can do the same with the Navlinks as well if needed)

Also, I would change the navbar flex element to justify top/start and not center.
if the user resizes the window to make it shorter,
or just uses a very short window, I want the navbar to show top to bottom.
that means that the bottom of the navbar could be scrolled to, but the logo is always in view. just give it a little spacing from the top.

You can also try an approach of giving “Div Block 62” 100% height and use Flex Justify space-around to space them. that way the flex container will distribute the logo, menu, icons spacing from top to bottom.

Hi Shay

I first of all want to apologize for the delayed answer. Anyway I managed to fix the problem by setting the height of “divblock 62” at 100% and used Flexbox to center and space them.

Thank you so much for your help and quick reply! :smiley:

Kind regards
Lukas :slight_smile: