[Resolved] Customize top menu to work with rtl and ltr languges

This topic contains 16 replies, has 2 voices, and was last updated by  Andrew Misplon 1 year, 4 months ago.

  • Author
    Posts
  • #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.

    #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?

    #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)).

    • This reply was modified 1 year, 4 months ago by  ParsiKade.
    #6463

    Andrew Misplon
    Keymaster

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

    #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.

    #6465

    ParsiKade
    Participant
    This reply has been marked as private.
    #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.

    #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!

    #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;
    }
    #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:

    • This reply was modified 1 year, 4 months ago by  ParsiKade.
    #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.

    #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.

    #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;
    }
    #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.

    #6488

    Andrew Misplon
    Keymaster

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

    .main-navigation ul ul li:last-of-type {
        margin-right: 0;
    }
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

Scroll to top