Comply With RTL Languages
Latest update: January 14, 2019 | Reading time: 3 to 4 minutesHere is a set of custom CSS rules you can add to HealthFlex to make it comply with RTL language format websites. Note that, this format is not officially supported, we provide the solution as is.
The set has been reported to solve a lot of issues related to language direction. We recommend adding it to Dashboard > Theme Options > Advanced > Scripts & Styles > Custom CSS (and also, use a child theme). Just copy and paste the following lines
BASIC RTL RULES
/* BASIC RTL SUPPORT */ body.rtl .header .topbar div[class*='col-'] { direction: ltr; text-align: right; } body.rtl .menu_container { left: 45px; } body.rtl a.social_links { left: 10px !important; right: inherit; } body.rtl #return-to-top i { right: 16px; } @media only screen and (max-width: 991px){ body.rtl .mainbar .logo { display: block; } } .pl_about_us_widget p.contact_detail:nth-child(2) span { direction: ltr; unicode-bidi: bidi-override; } .top_menu_container .menu-item img.iclflag { float: right; margin-left: 4px; }
You may need to apply additional rules so, keep on reading.
ADDITIONAL CSS RULES | HEADINGS GROUP
In case you also want to flip the diagonal Headings Group section, you will need to apply the following CSS:
/* HEAD PANEL - HEADING GROUP: Flip diagonal effect */ .rtl .head_panel .hgroup .title.diagonal-bgcolor-trans { background: linear-gradient(to left, #e5e5e5 15%, rgba(255, 255, 255, 0)15%); } @media only screen and (min-width: 1600px) { .rtl .head_panel .hgroup .title.diagonal-bgcolor-trans { background: linear-gradient(to left, #e5e5e5 25%, rgba(255, 255, 255, 0)25%); } } .rtl .head_panel .hgroup .subtitle.body-bg_section:after { content: ''; width: 0; height: 0; border-style: solid; border-color: #e5e5e5; border-width: 64px 0 0 100vw; bottom: -63px; border-left-color: transparent; border-right-color: transparent; left: 0; position: absolute; z-index: 9; -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotatex(3600deg); } .rtl .head_panel .hgroup .title.diagonal-bgcolor-trans h1:after { background: #e5e5e5; background: linear-gradient(to top left, #e5e5e5 0%, #e5e5e5 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); left: -72px; right: initial; } .rtl .head_panel .hgroup .title.diagonal-bgcolor-trans h1 { padding: 19px 0 0 30px; } /* HEAD PANEL - HEADING GROUP: Flip diagonal effect */
This code will flip the direction of the diagonal Headings as shown in the picture below.
ADDITIONAL CSS RULES | RTL MENU
If you want to move the menu to the left, you can apply the following CSS:
/* RTL MENU */ @media only screen and (min-width: 991px) { .rtl .menu_container ul.main_menu li, .rtl .top_menu_container ul.main_menu li, .rtl .menu_container ul.top_menu li, .rtl .top_menu_container ul.top_menu li { float: right; } .rtl .menu_container ul.main_menu li.lihasdropdown > a, .rtl .top_menu_container ul.main_menu li.lihasdropdown > a, .rtl .menu_container ul.top_menu li.lihasdropdown > a, .rtl .top_menu_container ul.top_menu li.lihasdropdown > a { padding: 10px 13px 10px 23px; } .rtl .menu_container ul.main_menu li.lihasdropdown > a:after, .rtl .top_menu_container ul.main_menu li.lihasdropdown > a:after, .rtl .menu_container ul.top_menu li.lihasdropdown > a:after, .rtl .top_menu_container ul.top_menu li.lihasdropdown > a:after { top: 8px; right: initial; left: 0; } .rtl .team_social + .menu_container { left: 45px; } .rtl .menu_container, .rtl .top_menu_container { right: initial; } }
This will flip the menu order as shown in the next screenshot:
VALID FOR ALL VERSIONS OF HEALTHFLEX