[Resolved] Menu Nav: menu items centered and two call to action on the right

[Adrien]

Dear GP Team,

I’m trying to have all my menu items centered on both nav and sticky nav. At the moment I’ve use a code I found on the forum. However, I would like to push both “Get Started” and “Login” to the right.

I would appreciate if you could help me.

nav#site-navigation {
flex: 1;
}
nav#site-navigation > .inside-navigation > #primary-menu > ul {
justify-content: space-between;
}
nav#site-navigation > .inside-navigation > #primary-menu {
width: 100%;
}
nav#site-navigation > .inside-navigation > #primary-menu > ul > li:last-child, nav#site-navigation > .inside-navigation > #primary-menu> ul > li:first-child {
margin-left: auto;
}

Thank you very much.

[David]

Hi there,

the css you showed above, change the last rule to:

nav#site-navigation > .inside-navigation > #primary-menu > ul > li:nth-child(4), 
nav#site-navigation > .inside-navigation > #primary-menu > ul > li:first-child {
    margin-left: auto;
}

Note we change this selector:

nav#site-navigation > .inside-navigation > #primary-menu > ul > li:last-child

to this:

nav#site-navigation > .inside-navigation > #primary-menu > ul > li:nth-child(4)

So it goes from targeting the last child to the 4th child.

[Adrien]

Ah thank you Maestro! I’ve understood how to modify this next time 😉 I’m super happy it’s looking good.

[David]

Glad to be of help

[Author]

Posts