Streaming live at 10am (PST)

Unique Nav Layout (Flexbox Not Centering Logo)


#1

Hey guys!

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

http://prntscr.com/is76hv!
image|690x100

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:

image


Here is my site Read-Only:

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


#2

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.


#3

Cheers DFink!

That worked perfectly.

Incase anyone stumbles across this:

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