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

Does anyone else using Webflow experience lagging, freezing, and crashing issues with the Webflow designer, even without recent JavaScript or third-party code updates? Is this potentially due to Webflow's maintenance or updates?

What is the best way to minimize downtime and update CNAME records after transferring an ecommerce site's hosting account to the client's own Webflow account for full Designer control?

How can I fix the issue with my grid layout sticking out on the right side of the page on tablet breakpoint in Webflow?

Can I customize the color of the arrows or round buttons in the slider on Webflow, or do I need to replace them?

How can I configure a large image to be in the foreground of my website homepage in Webflow, similar to an example I've seen, while still having a sidebar?

How can I resize a background video in Webflow so that it always fits centered without cutting off the sides?

How does changing from WordPress to Webflow affect the link structure and SEO of my website, including already shared links on social media?

How can I send a Webflow form submission directly to the CMS without relying on third-party tools or integrations?

What could be causing the issue where a Multi step form created using formly in Webflow does not submit properly and instead shows a "Please Wait..." message?

Can I upload varying numbers of audio files, ranging from 2 to 10, to a CMS Collection on Webflow?

How can I enable payment for hosts on my Webflow marketplace, similar to Airbnb, using the CMS feature?

How can I achieve better performance for my Webflow website on mobile devices, as it currently has a low score on mobile performance tests compared to desktop performance?

How can I properly load the jspdf library in Webflow to resolve the "uncaught referenceerror: jspdf is not defined" error I am encountering when adding a button that downloads the webpage as a PDF?

What is the CSS code for the navigation link in Webflow when it is in the selected (current) status?

How can I resolve the issue with Webflow displaying a blank page when trying to insert code from CodePen?

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?