Archived topic
Menu Nav: menu items centered and two call to action on the right
3 replies · Started by Adrien on March 30, 2023
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