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

This topic has 14 replies, 3 voices, and was last updated 2 years, 10 months ago by David.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
November 24, 2022 at 3:05 pm #2431948

Adrien

Dear GP Team,

Need your help to position some Menu items aligned on the left and some on the right.

after trying several solutions I found on this forum. Added class to my menu but CSS had no effect and nothing happened.
Also my customizer option menu is not set to “Use Navigation as Header”. When I do it, then it breaks my menu.

Appreciate your help. Here’s a screenshot of what im trying to do >>

Thanks.

November 24, 2022 at 6:30 pm #2432093
Fernando
Customer Support
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.
November 24, 2022 at 6:34 pm #2432096

Adrien

Dear Fernando,

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

Have a good day.

November 24, 2022 at 6:37 pm #2432100

Adrien

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?

November 24, 2022 at 7:02 pm #2432118

Fernando
Customer Support

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/

November 24, 2022 at 7:09 pm #2432122

Adrien

😉 In fact I don’t want to center the logo but do this shown on the picture :

November 24, 2022 at 7:15 pm #2432129
Fernando
Customer Support
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;
    }
}
```
November 24, 2022 at 7:35 pm #2432139

Adrien

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.

November 24, 2022 at 7:58 pm #2432159
Fernando
Customer Support
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.
November 24, 2022 at 8:10 pm #2432174

Adrien

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

November 24, 2022 at 8:21 pm #2432179

Fernando
Customer Support

You’re welcome Adrien!

November 25, 2022 at 5:45 am #2432885

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

November 25, 2022 at 7:10 am #2433073
David
Staff
Customer Support
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;
    }
}
```
November 26, 2022 at 12:37 am #2435181

Adrien

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

November 26, 2022 at 4:30 am #2435448

David
Staff
Customer Support

Glad we could be of help!
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

[Resolved] Menu items : some aligned on the left, some on the right

Popular Articles

Start building better websites today.