Unique Nav Layout (Flexbox Not Centering Logo)

itsaaronward · March 16, 2018, 7:53pm

Hey guys!

I’m trying to achieve a nav bar layout like so:

Here’s where I’m at in webflow:

The issue is aligning the logo to always be justified in the center, no matter the width of the left and right elements.

Is there a way to do this? I’m currently using a flexbox layout.

I found this gif to explain the issue I’m having:

Here is my site Read-Only:

https://preview.webflow.com/preview/aaron-ward-website?preview=8be0fcc18a21e7bd7014ae16ed3db75c

DFink · March 16, 2018, 9:47pm

I’ve had this issue as well and part of why I generally avoid using flex box. The best way might be to make the logo position: absolute after making the parent container position relative and then just put it where you want it.

itsaaronward · March 16, 2018, 10:40pm

Cheers DFink!

That worked perfectly.

Incase anyone stumbles across this:

I made the main nav bar position relative
Then made each element in the nav bar have an absolute position