How can I center the header nav links in Webflow while keeping the logo on the left?

Published on
September 22, 2023

To center the header nav links while keeping the logo on the left in Webflow, you can follow these steps:

  1. Wrap your header nav links and logo inside a div container.
  2. Give the div container a class name, for example, "header-container".
  3. Set the display property of the "header-container" class to "flex" to create a flex container.
  4. By default, flex items are aligned to the left, so the logo will automatically be positioned on the left side.
  5. To center the header nav links, add the following CSS properties to the "header-container" class: justify-content: center; align-items: center;.
  • The justify-content: center; property centers the items along the horizontal axis.
  • The align-items: center; property centers the items along the vertical axis.
  1. Save and publish your changes to see the centered header nav links while keeping the logo on the left.

Example CSS:

.header-container {  display: flex;  justify-content: center;  align-items: center;}

By following these steps, you can easily center the header nav links in Webflow while keeping the logo on the left.

Additional questions:

  1. How do I make my logo sticky in Webflow?
  2. Can I change the font size of my header nav links in Webflow?
  3. What other styling options are available for the header in Webflow?