Site logo

Archived topic

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

3 replies · Started by Adrien on March 30, 2023

Viewing posts 1–4 of 4

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.

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.

Ah thank you Maestro! I've understood how to modify this next time ;-) I'm super happy it's looking good.

Glad to be of help

This archived topic is closed to new replies.