Float right

Hi there,

If you’re using GP 3.0 then you would have to make sure that Customizer > General –> Structure is set to Floats for that method to work. If you’re using Flexbox then provide a link to your site where i can see the issue.

shorturl.at/hoMV3

I have all GP Premium options enabled. CSS code float right added to the Facebook item in the menu, does not work, I do not know why, everything is the same on the old page where it works, on each new page not.

Hi,

float doesn’t work because your navigation menu is using flexbox.

That said, try adding this CSS code:

div#primary-menu{
width:100%;
}

li#menu-item-327 {
    margin-left: auto;
}

This should push the facebook icon to the right side.

How to disable flexbox in GP options without CSS?

As David mentioned, the theme can be changed from flexbox to floats through Dashboard > Appearance > Customize > General.

Thank you, I have it!

There is one more error, despite the float right, it mobilely displays these elements one above the other instead of next to each other, which is a mistake.

Can you share a link to your site so we can see the issue?

https://shortly.cc/XEnRf

The icons have float right, but they are disastrously arranged one under the other on mobile devices and the menu does not fit.

Try this CSS:

.main-navigation.toggled .main-nav>ul {
    display: flex;
    flex-wrap: wrap;
}
.main-navigation.toggled .main-nav>ul li {
    flex: 1 0 100%;
}
.main-navigation.toggled .main-nav>ul li.menu-item-float-right {
    flex: 0 0 50px;
}

Works only mobile, menu items change position relative to the desktop.

How do you want them displayed on Desktop ?

I have added Facebook in the menu, then Messenger and it is displayed in this order, while float right mobile is the opposite, which is a bit misleading.

What happens if you add this?:

.main-navigation.toggled .sf-menu>li.menu-item-float-right {
    float: none !important;
}

Using floats isn’t really recommended anymore and this is one of the reasons – it can lead to unexpected results when it comes to the ordering of items.

No change.