Nav centering issues on smaller laptop screens

When the screen is set to 1516px, the navbar links are centered perfectly. However, on smaller screen sizes like 1024px, the nav links aren’t centered at all; there’s so much space at the bottom. Whenever I try to fix this, it messes up with the centering on larger screens. How do I fix this?

Thanks :slight_smile:

Read-only link: https://preview.webflow.com/preview/kosi-ux?utm_medium=preview_link&utm_source=designer&utm_content=kosi-ux&preview=1639b7c3d09debaf555f06fe491ea40f&workflow=preview

Hey @kosicookie, this can be fixed with a quick restructuring of your content and using the beauty flex-box.

  1. All the nav elements within the navbar container, such as Menu Button, Brand and Nav Menu, move it out and delete the empty navbar container

  2. Add a new div and call it nav-container and throw in the elements in: Menu Button, Brand and Nav Menu. Your structure should look as such:

  3. With the nav-container selected, set display: flex-box, align-items: center and justify-content: space-between as shown below:
    Screen Shot 2021-07-14 at 3.44.28 PM

After all this, you will have a consistent centering with your elements at all screen sizes.

At 1516px

At 1024px

Hope this helps!

1 Like

It worked! Thank you so much, I really appreciate it!!! :grin:

1 Like

I am glad it worked out for you! :grin:

1 Like