Archived topic
Float right some items in the Secondary Menu
3 replies · Started by Milan Petrović on May 7, 2021
I am using Secondary Navigation placed above the header, with left navigation alignment and Width set to Full and Inner Width set to Contained. I have 5-6 items in this menu, and I want the last 2 items to be aligned to the right side (I have added a special class to the items).
But, due to the flex-based layout for the menu, I can't get it to work. What is the best way to have the menu full width (inside the contained space), so that some items can float to the right side, and have the menu work as expected on smaller screens showing all items aligned left?
Milan
Hi there,
try adding this CSS:
@media(min-width: 769px) {
.secondary-navigation .main-nav {
flex: 1;
}
.secondary-navigation li:nth-child(4) {
margin-left: auto;
}
}The first rule uses the flex: 1 property which forces the main-nav element to Grow so it fills the available space.
Then in the second rule we target the li element and give it auto margin left so it pushes the item to the right. Change the nth-child value (4) to the first item you want moved to the right.
Thanks, this did the trick.
Glad to be of help
