How can I center my logo in the navigation bar with 2 links on the left and 3 links on the right in Webflow?

To center your logo in the navigation bar with two links on the left and three links on the right in Webflow, you can use a combination of flexbox and absolute positioning. Here's how you can achieve this:

1. Create a new section or container for your navigation bar. This will hold all the elements within the navigation.

2. Inside the navigation container, create a new div block, let's call it "left-links-container". This div block will contain the two links on the left side of the navigation.

3. Set the "left-links-container" div block to have a flex display. You can do this by selecting the div block, going to the Styles panel, and setting the display property to "flex".

4. With the "left-links-container" div block still selected, set the justify-content property to "flex-start" so that the links align to the left side.

5. Add your two links inside the "left-links-container" div block. You can use link blocks or text elements depending on your preference.

6. Next, create another div block inside the navigation container and name it "logo-container". This div block will contain your logo.

7. Set the "logo-container" div block to have a flex display and center the items using the justify-content property set to "center". This will horizontally center the logo within the navigation bar.

8. Place your logo inside the "logo-container" div block.

9. Finally, create another div block inside the navigation container and name it "right-links-container". This div block will contain the three links on the right side of the navigation.

10. Set the "right-links-container" div block to have a flex display and align the items to the right using the justify-content property set to "flex-end".

11. Add your three links inside the "right-links-container" div block, similar to the steps mentioned for the left links.

12. Adjust the positioning and styling of the navigation container and its child elements as needed to achieve the desired visual result.

By utilizing flexbox and absolute positioning, you can create a navigation bar with a centered logo and specific alignment for the links on the left and right sides. Remember to preview and test your navigation bar across different devices to ensure it displays correctly and responsively.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I make a responsive video autoplay and loop in Webflow, even on mobile devices?

Why does a POST request to my webhook in Webflow open a new tab and display the JSON response instead of showing a success message within Webflow?

Can the character limit for embedding HTML code in Webflow be increased beyond 10,000?

Is it possible to have a smaller image icon in Webflow that opens a Lightbox gallery with multiple images?

How can I ensure that elements on my Webflow one-page website are positioned consistently across different screen resolutions?

Is it possible to create a highlighted text effect using Webflow similar to the image provided?

How can I change the open graph image displayed when sharing my Webflow website via chat or social media?

Why am I getting 403 errors on my Webflow site, but only when I try using my Ionos domain?

Can the default container width of 960px in Webflow be changed to a different value, such as 1140px, for responsive site design?

What is a solution for producing an automated email with the price of a customized order and integrating a CRM system for lead generation on a Webflow website?

Has there been an update or change of keys in Webflow to move a heading and image into the same grid box using the Ctrl + drag on Windows method mentioned in the Cards video of the Webflow 101 course?

Has anyone experienced an issue where the script for checking/unchecking checkboxes in Webflow stops working when using the Custom style setting?

What dimensions should I use for a full-screen hero image on my Webflow website?

What is the issue with the Safari browser action bar on iPhones and iPads when using a full screen home page created with the Webflow platform?

How can I ensure that the tablet design in Webflow matches the PC design, especially when the tablet is set horizontally?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I add user input to the end of the redirect URL in Webflow?