[Resolved] Right Align Single Menu Items

[Lutz]

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.

[David]

Hi there,

can you share a link to the site where i can see the issue ?

[Lutz]

Both sites are under construction …

See the data in the private area.

Lutz

[David]

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.

[Lutz]

Hi David.
This works =;-)

-Lutz

[David]

Glad to hear that

[Author]

Posts