.menu-item-float-right CSS class not working on 3.0

[Phil]

Hi. Having lots of fun playing with version 3.0 – great job!

I don’t think the .menu-item-float-right CSS class is working on this version. When I apply it to primary menu items they don’t change position. I also tried adding the following CSS in case it had been removed but that didn’t work either:

.sf-menu>li.menu-item-float-right {
float: right!important;
}

Thanks,
Phil

[Elvin]

Hi Phil,

CSS float property doesn’t work on elements with display:flex;.

I believe you’re trying to right align your navigation menu.

Perhaps we can try a different approach?

You can try adding this code:

.main-nav {
    margin-left: auto;
}

This will automatically add left margin that’ll push your nav menu so it’ll appear right aligned.

Let us know if it works for you.

A wise man once said:
"Have you cleared your cache?"

[Tom]

More info on this here: https://docs.generatepress.com/article/switching-from-floats-to-flexbox/#menu-item-float-right

Alternative:

add_action( 'generate_menu_bar_items', function() {
    ?>
    <span class="menu-bar-item">
        <a href="URL HERE">Floated menu item</a>
    </span>
    <?php
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Phil]

Thanks Elvin and Tom, much appreciated 🙂

[Tom]

Glad we could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts