Menu items : some aligned on the left, some on the right

Hi Adrien,

To achieve this look on Desktop view, you can try adding this CSS through Appearance > Customize > Additional CSS:

@media (min-width: 1025px) {
    .site-header .inside-header nav#site-navigation {
        margin-left: unset;
        flex-grow: 1;
    }

    .site-header .inside-header nav#site-navigation div#primary-menu {
        width: 100%;
    }

    .site-header .inside-header nav#site-navigation ul.menu > li:nth-of-type(5) {
        margin-left: auto;
    }
}

Let us know how it goes.

Dear Fernando,

It worked like a charm! Thank you very much for taking the time to write this code.

Have a good day.

Fernando sorry I have one more question

How can I center the left menu between my logo and the 2 menu-item on the right?

You're welcome!

To clarify, are you referring to something like the one shown here: https://docs.generatepress.com/article/header-examples/#example-3

If so, you can remove the code I provided, and follow the instructions here: https://docs.generatepress.com/article/centering-logo-navigation/

;-) In fact I don't want to center the logo but do this shown on the picture :

I see. Thank you for clarifying.

I you want to center a specific set of menu items relative to the logo and the other menu item's position, replace the code I share above with this:

@media (min-width: 1025px) {
    .site-header .inside-header nav#site-navigation {
        margin-left: unset;
        flex-grow: 1;
    }

    .site-header .inside-header nav#site-navigation div#primary-menu {
        width: 100%;
    }

    .site-header .inside-header nav#site-navigation ul.menu > li:nth-of-type(5) {
        margin-left: auto;
    }

    .site-header .inside-header nav#site-navigation ul.menu > li:nth-of-type(1) {
        margin-left: auto;
    }
}

Thank you Fernando. It worked great except that my GP mega-menu for the first item-menu (products) is no more aligned on the left.

I see. Try this code instead:

@media (min-width: 1025px) {
    .site-header .inside-header nav#site-navigation {
        margin-left: unset;
        flex-grow: 1;
    }

    .site-header .inside-header nav#site-navigation div#primary-menu {
        width: 100%;
    }

    .site-header .inside-header nav#site-navigation ul.menu > li:nth-of-type(5) {
        margin-left: auto;
    }

    .site-header .inside-header nav#site-navigation ul.menu > li:nth-of-type(1) {
        margin-left: auto;
    }

    .site-header .inside-header nav#site-navigation ul.menu > li:nth-of-type(1) > ul {
        min-width: 500px
    }

    .site-header .inside-header nav#site-navigation ul.menu > li {
        position: relative;
    }
}

I gave the sub-menu of the first menu item a min-width so it's not too narrow. You can alter the value 500px to your liking.

Dear Fernando thanks a ton for your help. Everything worked, im super happy.

You're welcome Adrien!

Hello Fernando.

I need a little help again if you can. How can I apply your styles to my Sticky menu as well?

Thank you. Adrien

Hi there,

try changing the CSS to this:

@media (min-width: 1025px) { 
    .site-header .inside-header nav#site-navigation,
    #sticky-navigation .main-nav {
        flex-grow: 1;
    }

    .site-header .inside-header nav#site-navigation div#primary-menu {
        width: 100%;
    }
    .main-navigation ul.menu > li:nth-of-type(1),
    .main-navigation ul.menu > li:nth-of-type(5) {
        margin-left: auto;
    }

    .main-navigation ul.menu > li:nth-of-type(1) > ul {
        min-width: 640px;
    }
    .main-navigation ul.menu > li {
        position: relative;
    }
}

Dear David, It worked perfectly! Thank you for your amazing help always. Adrien

Glad we could be of help!