# Making Brand Header RTL compatible
**URL:** https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640
**Category:** Feature
**Tags:** completed, brand-header
**Created:** [October 19, 2018, 3:35pm UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640 "2018-10-19T15:35:51Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@hosna](https://meta.discourse.org/u/hosna)
#### Post date: [October 19, 2018, 3:35pm UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/1 "2018-10-19T15:35:51Z")
How can we make this component to be compatible with RTL websites?
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [October 19, 2018, 6:59pm UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/2 "2018-10-19T18:59:37Z")
Few CSS customization can make this RTL compatible. I will work on it.
---
### Author:  [@hosna](https://meta.discourse.org/u/hosna)
#### Post date: [April 10, 2019, 8:29am UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/3 "2019-04-10T08:29:34Z")
The component is not compatible with rtl websites. What should we do?
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [April 10, 2019, 8:36am UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/4 "2019-04-10T08:36:12Z")
> [@vinothkannans](#):
>
> Few CSS customization can make this RTL compatible. I will work on it.
I tried it before. But it demanded more changes than I expected. It’s not in my current roadmap. #pr-welcome.
---
### Author:  [@hosna](https://meta.discourse.org/u/hosna)
#### Post date: [April 10, 2019, 11:06am UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/5 "2019-04-10T11:06:31Z")
I can submit a PR however I just don’t know how can I get the direction of discourse as a variable in theme component.
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [April 10, 2019, 11:17am UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/6 "2019-04-10T11:17:48Z")
In RTL layout `` tag will include the CSS class `rtl`. You can do the customization based on it. If needed you can also check it in JS code by calling `const isRTL = $("html").hasClass("rtl");`.
---
### Author:  [@hosna](https://meta.discourse.org/u/hosna)
#### Post date: [April 10, 2019, 11:28am UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/7 "2019-04-10T11:28:16Z")
Sorry I didn’t understand you correctly. I just need to add a variable in `common.scss` file that indicates discourse global direction. I didn’t find such variable here:
> [@Use Discourse Core Variables in your Theme](https://meta.discourse.org/t/how-to-use-discourse-core-variables-in-your-theme/77551):
>
> Discourse is incredibly customizable! The goal of this topic is to show you how make use of all the amazing options that are available to you as a theme developer. You know… so that you don’t have to reinvent the wheel smileVariables? What variables? Variables cover a large number of things, from font sizes to colors to z-index values. You can use and override the vast majority of variables in your theme editor. Colors There are many colors available for you to use or override in your them…
If I have that variable in `common.scss` the customization would be pretty straightforward. Otherwise I don’t know how to do it.
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [April 10, 2019, 11:35am UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/8 "2019-04-10T11:35:53Z")
Yes, we don’t have a global CSS variable I guess. You should check [rtl.scss](https://github.com/discourse/discourse/blob/c742d420316be22ab2e90cd94b442bed994396d4/app/assets/stylesheets/common/base/rtl.scss) file to understand howto customize.
---
### Author:  [@hosna](https://meta.discourse.org/u/hosna)
#### Post date: [April 10, 2019, 2:52pm UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/9 "2019-04-10T14:52:14Z")
I submitted a pr
[https://github.com/discourse/discourse-brand-header/pull/3](https://github.com/discourse/discourse-brand-header/pull/3)
---
### Author:  [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [April 10, 2019, 3:22pm UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/10 "2019-04-10T15:22:28Z")
It’s merged. Thanks for the PR ❤.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 18, 2024, 9:52pm UTC](https://meta.discourse.org/t/making-brand-header-rtl-compatible/312640/11 "2024-06-18T21:52:47Z")