[Resolved] .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.

[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
} );

[Phil]

Thanks Elvin and Tom, much appreciated 🙂

[Tom]

Glad we could help! 🙂

[peterj]

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

Where do I add this code snippet? I’m a relative beginner with WP and using GeneratePress/Dispatch. I want to move the social media icons next to the search icon.

Current Menu Bar

[Leo]

That can be added using one of these methods:
Adding PHP: https://docs.generatepress.com/article/adding-php/

Or you can actually use a hook element. See more info here:
https://docs.generatepress.com/article/generate_menu_bar_items/

If you need more help, please open a new topic and link us to the page in question.

Thanks!

[Author]

Posts