Archived topic
Right Align Single Menu Items
5 replies · Started by Lutz on December 21, 2022
Hi, I've installed GeneratePress Premium on my website. I need a header menu with 4 menu items - two of them should be left aligned, the other two should be right aligned.
In my old version 3.0.2 of GeneratePress (GP Premium 1.12.3), I solved this by adding a CSS class "menu-item-right" to the two items and adding an additional CSS
.menu-item-right
{
float: right !important;
}
Everything worked fine!
Now I've updated to GeneratePress 3.2.4 (GP Premium 2.2.2) and all 4 menu items are left aligned. I found no way to get the wished layout.
How can I get back my old layout?
Best regards.
Hi there,
can you share a link to the site where i can see the issue ?
Both sites are under construction ...
See the data in the private area.
Lutz
Ok, so new sites built with GP uses CSS flexbox so the old floats CSS won't work.
Change your CSS to this instead:
@media only screen and (min-width: 768px) {
.main-nav {
flex: 1;
}
.menu-item-right {
margin-left: auto;
}
}And only add the menu-item-right to the 3rd menu item. As it will push it and the following items over.
Hi David.
This works =;-)
-Lutz
Glad to hear that
