Menu issue - logo centered with nav right

[playandco]

Hi there,

I have a very simple menu layout that I’ve used on other sites but can’t seem to get to work on this new site on Pro.

I want to have the logo centered and the nav to the right. Here’s a screenshot of what I’m trying to achieve: https://gyazo.com/56752814cb54259c913b89802ef3cd7c

I’ve tried various commands but no luck. Can someone help me figure out how to do this?

Thanks.

[Joao]

Hi There,

Please try creating two different bars and set both to position absolute.

1 Bar you will have the horizontal centered with the logo and the other bar you will have the mobile nav and the horizontal content aligned to the end.

Let us know how it goes.

[playandco]

There are two issues with that approach.

First, having them set to position: absolute moves the rest of the site content up, so I’d have to find a fix for that.
Second, and most importantly, whichever bar is on bottom - the items cannot be clicked. Since both my logo and the menu will be links, I obviously need them both to be active.

This is definitely possible using CSS. I’ve done the exact same thing on another site using the following code:

.nav-hamburger {
   display: block;
   position: absolute;
   right: 0;
}

However, for some reason this code is not working on this site. It’s weird because I have both headers set up EXACTLY the same way, but on my other site the CSS works, and on this site it doesn’t.

Any reason why that would be happening? Theme inconsistencies…?

[Joao]

Hi There,

You can add 1 Bar.

Add 3 Containers

Leave the first container empty.

Second Container you center the horizontal alignment and add your logo

Third container you will add your mobile nav.

Let us know how it goes.