Customize top menu to work with rtl and ltr languges

Hi 🙂

Just at a glance, is the problem not the following rule?

.main-navigation ul li .sub-menu .menu-item-has-children>a:after,
.main-navigation ul li .sub-menu .page_item_has_children>a:after,
.main-navigation ul li .children .menu-item-has-children>a:after,
.main-navigation ul li .children .page_item_has_children>a:after {
	content: "\f104";
	font-family: "FontAwesome";
	position: absolute;
	left: 1em;
	padding: 0 0.4952em 0 0;
	right: initial;
	top: 0.5em;
}

Does that not need to be targeted for lang too?

Hi!
Thanks for your reply.

I also targeted that rule for lang(fa), but doesn’t help and the problem is still there.

It’s really confusing, this same code works perfectly fine without lang() selector, but then when I add lang() to rules, the problem I mentioned in my previous post occurs.

By the way, now my CSS looks like this, but the results are same as before:

.main-navigation ul ul:lang(fa) {
	text-align: right;
  background-color: #ffff75;
}

.main-navigation ul ul li:lang(fa) {
	margin-right: 0;
}
.main-navigation ul li ul:lang(fa) {
	left: initial;
	left: auto;
	right: 0;
	text-align: right;
}
.main-navigation ul li ul ul:lang(fa) {
	right: 100%;
}
.main-navigation ul li .sub-menu .menu-item-has-children>a:after:lang(fa),
.main-navigation ul li .sub-menu .page_item_has_children>a:after:lang(fa),
.main-navigation ul li .children .menu-item-has-children>a:after:lang(fa),
.main-navigation ul li .children .page_item_has_children>a:after:lang(fa) {
	content: "\f104";
	font-family: "FontAwesome";
	position: absolute;
	left: 1em;
	padding: 0 0.4952em 0 0;
	right: initial;
	top: 0.5em;
}
.main-navigation ul li .sub-menu a:after:lang(fa),
.main-navigation ul li .children a:after:lang(fa) {
	content: none;
}

#masthead.site-header.sticky-header.scale.responsive-menu:lang(fa) {
  background-color: #ffff75;
}

.main-navigation ul ul li:hover > a:lang(fa) {
  background-color: #ffbb00;
}

.main-navigation div > ul > li > a:hover:lang(fa) {
  color: #c41202;
}

.main-navigation ul:lang(fa) {
  position: fixed;

.main-navigation ul:lang(en) {
  position: inline;
}

As I said my English menu is working right now and has Ultra theme’s default style thanks to the last applied rule (.main-navigation ul:lang(en)).

Thanks for your feedback, please, send your URL so I can see. You can use Set as private reply.

If you’re using a child theme we can add a rtl.css file to the child theme folder, that would negate the use of lang selectors and make things easier.

This reply has been marked as private.

Super, thanks. Let’s start with the child theme. Do you have a text editor installed on your computer? There are many to choose from, Sublime Text trial version for example. Copy all of the CSS you want to apply to the RTL site into a new file, name it rtl.css. Remove all the :lang selectors. Save and upload the RTL file to your child theme which is at /wp-content/themes/ultra-child/ on your server. Then, remove all of the Custom CSS pertaining to the menu. The RTL CSS file will only target RTL languages and should hopefully, sort this out.

Awesome! It works perfect. Now two more things and I’ll master Ultra theme’s menu. 😀

1. in Farsi language, some menu items had wrong spacing between them, I could solve this problem by rearranging menu items (I don’t know what caused it, but when some menu items are located next to each other, they don’t seem to follow spacing rules). Now, this is happening again for my language switcher. I think below image describes what I want to say better:

How can I resolve this issue and make “English” and “تماس با ما” have normal spacing?

2. As it’s a responsive menu, when on mobile or tablet, it becomes a hamburger menu, what CSS property should I edit to change its color and make it rtl?

Thank you!

Super 🙂

1. Add the below to your rtl.css file:

.main-navigation ul li:last-of-type {
    margin-right: 1.78571em;
}

2. Remove the following from the end of your rtl.css file:

.main-navigation ul {
  position: fixed;

Add the following:

.responsive-menu .main-navigation.toggled ul li a {
	text-align: right;
}
.responsive-menu .main-navigation.toggled ul>li[class*=children]>span {
	right: initial;
	left: 0;
}
.responsive-menu .main-navigation.toggled ul>li[class*=children] ul li a {
	padding-left: 0;
	padding-right: 36px;
}
.responsive-menu .main-navigation.toggled ul>li[class*=children] ul li ul li a {
	padding-left: 0;
	padding-right: 54px;
}
.responsive-menu .main-navigation.toggled ul>li[class*=children] ul li ul li ul li a {
	padding-left: 0;
	padding-right: 72px;
}
.responsive-menu .main-navigation.toggled ul>li[class*=children] ul li ul li ul li ul li a {
	padding-left: 0;
	padding-right: 90px;
}
.responsive-menu .main-navigation.toggled ul>li[class*=children] ul li ul li ul li ul li ul li a {
	padding-left: 0;
	padding-right: 108px;
}
.responsive-menu .main-navigation.toggled ul>li[class*=children] ul li ul li ul li ul li ul li ul li a {
	padding-left: 0;
	padding-right: 126px;
}

Trying to get rid of the below block expands the menu and shows menu items in two lines which is not what I’m looking for:

.main-navigation ul {
  position: fixed;
}

I added the code you submitted and now menu items spacing looks good, though now submenus items are not aligned again. I’m sure it has something to do with ‘.main-navigation ul li:last-of-type’:

Now if I add the ‘.main-navigation ul {position: fixed;}’ block again, menu looks like below. Everything is in order except submenu items alignment:

In the rtl.css file there is a selector as follows:

.main-navigation ul ul

In that rule, remove the entire margin-right declaration.

I deleted it but the problem still exists.

Here’s the selector’s code:

.main-navigation ul ul {
	text-align: right;
        background-color: #ffff75;
	margin-right: 1.78571em;
}

I removed ‘margin-right’ line. But unfortunately it didn’t solve the problem.

The margin-right is still there. Did you put it back?

This:

.main-navigation ul ul {
	text-align: right;
  background-color: #ffff75;
	margin-right: 1.78571em;
}

Must become this:

.main-navigation ul ul {
	text-align: right;
  background-color: #ffff75;
}

Yes, I removed it and now it looks like this:

.main-navigation ul ul {
	text-align: right;
  background-color: #ffff75;
}

But as I said, it didn’t solve the problem.

Thanks. That’s one problem fixed. Now add:

.main-navigation ul ul li:last-of-type {
    margin-right: 0;
}

Yes!! Problem solved.

Thank you very much for your help, Andrew.