Logo & Nav bar left and CTA on the Right

Hi there,

i would suggest disabling the Navigation as Header option in the Customizer > Layout > Header.
Then re-add your Logo to Site Identity ( so its not cropped ) and change its Logo Width until its the size you require it.

Once thats done i can provide some CSS to create the rest of the layout.

Okay I updated the header and updated the logo

Hi EJ,

If you wish to replicate the width of the navigation as well, consider changing the container width value on Appearance > Customize > Layout > Container to 1440px from the default 1200px.

You then change this custom CSS:

@media (min-width: 1024px){
#primary-menu {
margin-left: auto;
margin-right: auto;
}
}

to

@media (min-width: 1024px){
#primary-menu {
    margin-left: 10px;
    margin-right: auto;
}
}

So it's aligned to the left rather than being centered, just like your reference.

If you wish to add the search icon, It's added through Appearance > Customize > Layout > Primary Navigation. You should see a dropdown to enable the Navigation Search.

As for the sticky navigation, add this CSS so it has the same max-width setting.

nav#sticky-navigation .inside-navigation {
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 0;
}

Hey I made all those changes but the nav bar still looks nothing like it

Hi Ej,

Try add this CSS:

@media (min-width: 1024px) {
#site-navigation {
    width: 100%;
}
.nav-float-right .navigation-stick .navigation-branding {
    margin-right: 0;
}

I see the container width is still at 1200px, would you like to keep it as it is?

Yes it worked, i am keeping the 1200px as is for now. Do you know why the sticky navbar inner container is full width? I would like to keep it the same as before scroll

The Sticky Nav will inherit the width options set in Customizer > Layout > Primary Navigation --> Inner Width