Resolved

Customize top menu to work with rtl and ltr languges

Ultra Theme started by ParsiKade Apr 29, 2017 16 replies
ParsiKade Apr 29, 2017 · 12:38 pm #6459

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.

Andrew Misplon Puro May 3, 2017 · 2:59 pm #6504

Awesome 🙂

17 posts