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 do I fix the issue of the content not being brought to the top when switching between tabs in Webflow? Additionally, how can I make my tab elements behave like other elements within containers?

How can I fix the issue with my Webflow site's footer floating above the bottom of the page on the third page, even though it has the same settings as the other pages?

How can I create a responsive masonry grid in Webflow that works on all devices and can be customized?

How can I redirect my old domain to my new domain in Webflow after rebranding?

How can I create a full-page masonry grid portfolio with 4 columns and 3 rows using Webflow?

How can I ensure that the PDF links on my Webflow staging site open in a new window, and how can I set the PDF file links to have a domain-matching URL?

How can I enforce numeric input in form input fields in Webflow?

Can I create custom shapes in Webflow to add onto my hero image?

How can I change the color of the visited page link in the navmenu on my Webflow site?

How can I fix the issue of the background scrolling on iOS instead of staying fixed in the mobile view on Webflow?

Why is the Owl Carousel not working on my Webflow project?

Is there a reference or page that lists these .svg icons in Webflow? Is a membership required to access them? Is there anyone who can share icons like the example provided?

How can I apply the same settings (such as cover and no-repeat) for CMS background images in Webflow as I do for other background images?

How can I incorporate live shipping rates from UPS, FedEx, USPS, and LTL shipping into a client's website using Webflow?

Is it possible to exclude the blog page and navigation button from the subdomain and prevent them from being translated into English using Webflow?

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?