Docs

[Maaz]

Hi there,
Hope you’re having a great time!

here’s what it is:

1- (Website has 2 languages), What is the proper way to set different font for a different language that uses RTL styles (Which is Arabic)?!

2- I’m using the following css code to get a fixed navbar in mobile:

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}

My question is, Is it possible to make the navbar shrink a little in a smooth transition while scrolling down from the top and then stick to the top! instead of jumping from one position to another (which is what’s happening right now!)?

Thank you so much.

[Joao]

Hi There,

1

Hi there,

You need to set a RTL language to activate rtl style inside X.

#3 Set up a child theme and add
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
to style.css file located in your child theme.

Now you can assign your font family by adding this code in Customize -> Custom -> CSS:

body{
font-family: 'Droid Arabic Kufi', serif;
}

You can find more information on this thread:

https://community.theme.co/forums/topic/how-to-make-an-rtl-website/#post-122640

2- Would you mind providing your URL so we can take a look?

Thanks

Joao

[Maaz]

Hi,

Let me explain a bit more:
-I already have ‘Arabic’ set up as a second language for my website, thus it uses the RTL styles!.

-What I exactly need is to change the font family of the entire website for that language ONLY.

-I tried applying the changes you mentioned above but it didn’t work!.

Few more things to take into consideration:
– I have an exact font I want to use which can be found here (https://fonts.googleapis.com/css?family=Cairo:600).

– I’m using WPML to translate the website, idk if that would make any difference; just in case it would!.

-I’m already working with a child theme.

Link to website: http://www.entelaaq.com

Thank you.

[Christopher]

Hi there,

You need to follow this link and upload different font formats to your host files : https://community.theme.co/forums/topic/merriweather-google-font-problem/#post-219525

Please add this code:

body.rtl, body.rtl li a, body.rtl h1, body.rtl h2, body.rtl h3body.rtl, body.rtl h4, body.rtl h5, body.rtl h6, body.rtl .h1, body.rtl .h2, body.rtl .h3, body.rtl .h4, body.rtl .h5, body.rtl .h6, h1 a, body.rtl h2 a, body.rtl h3 a, body.rtl h4 a, body.rtl h5 a, body.rtl h6 a, body.rtl .h1 a, body.rtl .h2 a, body.rtl .h3 a, body.rtl .h4 a, body.rtl .h5 a, body.rtl .h6 a, body.rtl blockquote {
  font-family: 'Cairo';;
}

Hope it helps.

[Maaz]

Hi,

I did everything as mentioned but it didn’t work! any ideas? Also, I would like to know the css classes for all of the website elements in RTL mode, including navbar menu items, topbar text and logo font (I just want the whole website to have a different font for that specific language)

Thank you.

[Rupok]

Hi there,

I can see you have added CSS like this for RTL :

.rtl .x-navbar .x-nav-wrap .x-nav > li > a {
  font-family: "El Messiri",sans-serif;
}

And this is working just fine. You can do the same for other elements as well using the preceding .rtl

Thanks!

[Maaz]

Hi,

Yes, I managed to fix that and forgot to update the thread, sorry about that!

However, I’m still having the issue with the fixed navbar on mobile, any ideas about that one?!

Thank you so much for the great support and apologies for any inconvenience.

[Christian]

Hey there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts