Site logo

Archived topic

Move menu items to right (RTL Translated Site)

7 replies · Started by Shakespeare on November 8, 2017

Viewing posts 1–8 of 8

Hi,

- I'm using WPML as translator and I want to move some items in the right side of the menu. Seems like the tutorial you have doesn't work or may be I missed something: menu-item-float-right here are the items that I want to move: http://prntscr.com/h7u5rq

- In the primary menu seems like the spacing is not the same with the English version. I don't have any idea to fix it like the english version: http://prntscr.com/h7u6cj

Hoping for your assistance.

Hi Leo,

-I already added menu-item-float-right but it's still the same.

- The code was already added.. See my english version. It is working but not in arabic.

.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

.main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 20px;
}

You have this CSS below added which is making float right to float left and remove the padding on menu items:

.sf-menu>li.menu-item-float-right {
    float: left!important;
}
.main-navigation .main-nav ul li.menu-item-has-children>a,
.secondary-navigation .main-nav ul li.menu-item-has-children>a {
    padding-left: 0;
}

Hi Leo,

I'm not seeing those CSS you've mentioned.

=(

Since you removed the dropdown arrows, you need to re-add spacing to your menu items:

.main-navigation .main-nav ul li.menu-item-has-children>a, 
.secondary-navigation .main-nav ul li.menu-item-has-children>a {
    padding-left: 20px;
}

Typically we reverse things on RTL, so menu-item-float-right floats to the left (not very intuitive, needs some thought).

For now, you can do this:

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

Solved. Thanks Tom and Leo!

Glad we could help :)

This archived topic is closed to new replies.