Customize top menu to work with rtl and ltr languges

This topic has 16 replies, 2 voices, and was last updated 7 years, 7 months ago by Andrew Misplon.

Tagged: menu multilingual primary menu rtl

Author
Posts
April 29, 2017 at 12:38 pm #6459
ParsiKade
Participant
Hi again,
After using Ultra theme for the WordPress site I’m working on, I couldn’t get primary menu to show correctly for an rtl language (Farsi). The problem was eventually solved with help of Andrew (This topic)
Though, when I added English to my website (used Polylang to create a multilingual site), the menu didn’t show up in English because of the custom CSS which was applied to theme.
After some research, I realized I can use :lang() selector to apply css rules to a specific language. I’ve applied :lang() selector to all css rules that was added before, now English menu looks normal (default theme style), but again my Farsi menu has a problem and submenus look like this:
Here’s my customs css code at the moment:
```
.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,
.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;
}
.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;
}
```
Final block [main-navigation ul:lang(en)] solved English menu appearance. I’ve tried to apply :lang() to every block, but no luck. ?
I’ve reverted settings to prevent problems on the site, but if it’s needed, I can apply these same settings again and share a link to the site.
April 29, 2017 at 5:34 pm #6460
Andrew Misplon
Keymaster
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?
April 29, 2017 at 7:34 pm #6461
ParsiKade
Participant
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)).
April 29, 2017 at 7:38 pm #6463

Andrew Misplon
Keymaster
Thanks for your feedback, please, send your URL so I can see. You can use Set as private reply.
April 29, 2017 at 7:41 pm #6464

Andrew Misplon
Keymaster
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.
April 30, 2017 at 4:53 am #6465

ParsiKade
Participant
This reply has been marked as private.
April 30, 2017 at 7:53 am #6466

Andrew Misplon
Keymaster
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.
April 30, 2017 at 1:21 pm #6467

ParsiKade
Participant
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!
April 30, 2017 at 7:12 pm #6472
Andrew Misplon
Keymaster
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;
}
```
May 1, 2017 at 4:45 am #6476
ParsiKade
Participant
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:
May 2, 2017 at 9:39 am #6482

Andrew Misplon
Keymaster
In the rtl.css file there is a selector as follows:
.main-navigation ul ul
In that rule, remove the entire margin-right declaration.
May 2, 2017 at 3:07 pm #6483
ParsiKade
Participant
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.
May 2, 2017 at 3:09 pm #6484
Andrew Misplon
Keymaster
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;
}
```
May 2, 2017 at 4:52 pm #6487
ParsiKade
Participant
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.
May 2, 2017 at 4:56 pm #6488
Andrew Misplon
Keymaster
Thanks. That’s one problem fixed. Now add:
```
.main-navigation ul ul li:last-of-type {
    margin-right: 0;
}
```
Author
Posts