[Resolved] Logo and primary nav on the left – about us and CTA button on the right

[LoGP]

Hey guys,

I’m trying to recreate a header/navigation like this one:

View post on imgur.com

(btw. I’m not using that page builder, just GP).

So the logo and primary nav are aligned left, next to each other. Then on the right side a link to about us and CTA button, next to each other. All in one horizontal header.

Closest I came was setting the navigation as header and align the navigation to the left. But how do I get the about us link and CTA button on the other side?

[David]

Hi there,

can you remove the coming soon so i can take a look at what CSS is required.

[LoGP]

Yes, done!

[David]

Add this CSS:

@media(min-width: 769px) {
    .main-navigation ul {
        display: flex;
    }
    .main-navigation .main-nav ul li.push-right {
        margin-left: auto;
    }
}

Then edit your Menu. Select the menu item before the button that also needs to be ‘floated’ right. Add the CSS class of push-right

[LoGP]

You Tha Man!

[David]

Glad to be of help

[Author]

Posts