[Resolved] Navigation as header layout

[Maciej]

Trying to accomplish this nav menu layout:
http://www.squarespace.com

Im on the latest GP Version

I currently have a header Element set up for transparent navigation.

I tried but no luck

.inside-navigation {
display: flex;
justify-content: space-between;
}

.header-wrap .navigation-branding {
order: 1;
margin-right: auto;
}

.header-wrap .main-navigation {
order: 2;
margin-left: auto;
margin-right: auto;
}

.header-wrapr .secondary-navigation {
order: 3;
margin-left: auto;
}

[David]

Hi there,

in the example there is logo / center nav / right nav – what is to be added to the righthand side of your site?

[Maciej]

Sorry for the late response. I want to have the layout this way

Logo (aligned left) – 3 menu items center – 2 menu items aligned right

[Maciej]

Also I forgot to mention I am using navigation as header. And trying to make a sticky navigation.

I tried splitting the header into 3 sections, and was playing around with flex box but can’t seem to get it right. Any help would be greatly appreciated.

[David]

Could you add the additional 2 menu items you want aligned right in your menu. The first of these two menu items can you add a CSS class of push-right

Adding classes to menus: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Once done i can take a look at the CSS required.

[Maciej]

Ok I added the class but It didn’t push right for some reason.

[Maciej]

I got most of the way there but my 3 center items are not centered

[David]

Looks like you figured it out?

[Maciej]

Hello, Im back at it again. Lost my previous site so I needed to start over. Kinda stuck in the same place as last time.

pretty much trying to accomplish a 3 column nav bar.

[David]

Can you share a link to your site so i can see where you got to ?

[Maciej]

http://www.uicanvas.com

[Tom]

Hi there,

Give this CSS a shot:

@media (min-width: 769px) {
    .nav-aligned-center .main-navigation.has-branding .inside-navigation {
        justify-content: flex-start;
    }

    .nav-aligned-center .navigation-branding {
        margin-right: auto;
    }

    .main-navigation:not(.slideout-navigation) .main-nav {
        flex-grow: 1;
    }

    .nav-aligned-center .main-navigation ul {
        display: flex;
    }

    li#menu-item-41 {
        margin-left: auto;
    }

    .nav-aligned-center .main-navigation ul > li:first-child {
        margin-left: auto;
    }
}

[Maciej]

Tom, you are the man! THANK YOU

[Tom]

You’re welcome 🙂

[Author]

Posts