[marwantahaParticipant]

Dear X theme developers,
This is a multi-part question
1) I have a simple question regarding blockquotes, I just want to remove the (-) Dash sign before the author
so whenever I type the author’s name, It would appear normal without any dashes beforehand

http://prntscr.com/9wwk9v
This would be a good solution, Since I’ve managed to customize colors of blockquote & its author

2) I have WPML showing Arabic content (RTL) so I had to adjust my top bar to fit in both (Arabic & English)

Here’s the working code (Customizer)
.x-topbar { background-color: #213f93; }
.h-feature-headline span i {
background-color: #213f93 !important;
}
.x-social-global i {
font-size: 24px;
}
.x-social-global a {
color: #ffffff;
}
.x-social-global a:hover {
color: #000000;
}
.rtl.x-navbar-fixed-top-active .masthead-inline .x-brand {
float: left;
}

.rtl.x-navbar-fixed-top-active .masthead-inline .desktop .x-nav {
float: right;
}
.rtl .x-topbar .p-info {
float: left;
}
.rtl .x-topbar .p-info a {
float: left;

}
.rtl .x-topbar .x-social-global {
float: right;
}
.rtl .x-topbar .x-social-global a {
float: left;
}
.rtl .x-topbar .p-info {
padding-left: 20px;
}
.rtl .x-topbar .p-info > span > a:first-child {
margin-right: 3px;

}

What I need to do is that in Mobile site Arabic language, I want X theme to show the same topbar for English mobile site, As it gets distorted in arabic

Check here English http://www.inspectsolutions.co/
Arabic http://www.inspectsolutions.co/?lang=ar

3- Last part is that in Mobile site the menu is shown as three dashes icon if you press on it, The menu should expand showing you pages, Right?

I need to add text next to that icon saying “Menu” in English mobile site, and also add same text in Arabic language when showing mobile site arabic version “القائمة” which is the translation of word “Menu”

Thanks

[marwantahaParticipant]

This reply has been marked as private.

[marwantahaParticipant]

the screenshot should explain how I want to display text regarding question #1 ..

TIA.

[ChristopherModerator]

Hi there,

#1 Please add this :

.x-cite:before {
    content: "";
}

#2 Please find following code :

.rtl .x-topbar .p-info {
float: left;
}
.rtl .x-topbar .p-info a {
float: left;

}
.rtl .x-topbar .x-social-global {
float: right;
}
.rtl .x-topbar .x-social-global a {
float: left;
}
.rtl .x-topbar .p-info {
padding-left: 20px;
}
.rtl .x-topbar .p-info > span > a:first-child {
margin-right: 3px;

}

And update it to :

@media (min-width:767px){

.rtl .x-topbar .p-info {
float: left;
}
.rtl .x-topbar .p-info a {
float: left;

}
.rtl .x-topbar .x-social-global {
float: right;
}
.rtl .x-topbar .x-social-global a {
float: left;
}
.rtl .x-topbar .p-info {
padding-left: 20px;
}
.rtl .x-topbar .p-info > span > a:first-child {
margin-right: 3px;

}
}

#3 Add this as well :

a.x-btn-navbar:before {
    content: "Menu ";
}
.rtl a.x-btn-navbar:before {
    content: "القائمة ";
}

Hope that helps.

[marwantahaParticipant]

First of all I’d like to thank you for your reply,
#1 Is solved, So Thank you for that

#2 It managed to fix the way the top bar looked, However it still looks distorted (or at least different) from English top bar, Kindly advice

#3 When I add the code aside from the fact that the logo gets aligned to the left so that the whole row would fit the Logo on the left, and on the right it tries to fit the word “Menu” along with icon

But the problem is that the first element which is slider in my HOME page gets resized and loses its width,
And Contact us page the map also gets resized (Also first element in page)

Thanks

[NicoModerator]

Hi There,

#2. Adjust the number below to adjust spacing using this CSS below:

.rtl .x-topbar .p-info > span > a:first-child {
margin-right: 3px;
margin-left: 3px;
}

.rtl .x-topbar .p-info > span > a:last-child {
margin-right: 3px;
margin-left:1px;
}

#3, Little confuse of the problem. Would you mind sharing us a screenshot for clarification.

Meanwhile, try this code below to adjust the height in mobile when scrolling so that it would not overlap the slider.

@media (max-width: 979px)
body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 103px;
}

To fix menu on mobile:

@media (max-width: 979px)
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
}

Move the mobile menu in rtl to the right.

@media (max-width: 979px)
.rtl .masthead-inline .x-btn-navbar {
    float: right;
}

Hope it helps.

Thanks.

[marwantahaParticipant]

Ok Sorry for the late reply, But i was trying every possible combination of previously provided codes, First of all here’s screenshot of English website and Arabic ones, this is the best layout I could get however it still needs a few extra lines of code to settle to the final point

English Mobile site which has the most suitable layout
Photo #1 : http://prntscr.com/9yhxni

Arabic mobile site Photo #2 : http://prntscr.com/9yhy2q

Q1- You can see that Arabic mobile topbar [till Linked In & Facebook icons] are inverted of the original English mobile site,

What I want is to apply (keep) English Mobile site topbar as it is, and apply it to Arabic mobile site without it being inverted [i.e : I want both English & Arabic Mobile site to show the same topbar of English]

Q2- The word Menu next to dashed icons for Menu in English mobile site, Is there a possible way to edit its position Currently its location is as Photo #1, However I want it to be like Photo #3
So is there a possible way to align the text word “Menu” along with its icon to be in the middle of the logo like this image #3
Photo #3 : http://prntscr.com/9yi6b8

If so, Please provide CSS that would move location of word (Menu Or القائمة) for Both Arabic & English mobile site to desired location

Q3- One last thing, if you look at photo #2, If you are looking RTL you should see the word القائمة on the right and next to it you should find the three dashed icon for menu

What should I do if I want to invert it to make it like this RTL you should see first the three dashed icons then you see the text “القائمة”

Here’s a screenshot of desired edit

http://prntscr.com/9yi5xj

Thank you a mill. sorry for the long reply

[marwantahaParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the complete description and detailed information.

Q1. Please add the following CSS:

@media (max-width: 767px){
.rtl .x-topbar .p-info a:first-of-type {
    margin-left: 37px;
}
.rtl .x-topbar .p-info a {
    float: left;
    margin-right: 5px;
}
.rtl .x-topbar .p-info a:last-of-type {
    margin: 0 0 0 -5px;
}
.rtl .x-topbar .p-info span:first-of-type {
    padding-left: 0px !important;
}
}

Q2. To move the location of the menu vertically, please use the following CSS:

.x-btn-navbar {
    margin-top: 20px;/*Adjust this accordingly*/
}

Q3. Please remove the following CSS:

  a.x-btn-navbar:before {
    content: "Menu ";
}
.rtl a.x-btn-navbar:before {
    content: "القائمة ";
}

Then add the following instead:

@media (max-width: 979px){
.rtl .masthead-inline .x-btn-navbar {
    float: right;
}
.rtl .x-navbar i.x-icon-bars:before {
    content: "\f0c9 القائمة" !important;
}
.x-navbar i.x-icon-bars:before {
    content: "Menu \f0c9" !important;
}
}

Hope this helps.

[marwantahaParticipant]

Hello there, Thanks a lot your code seems to be working however there are 2 glitches yet

Q1 : the top bar is now working well except for the fact that in Arabic mobile site, Social icons are still inverted
for example, If you preview mobile site, You should find top bar content on two lines
(LTR) First line has Languages Ar, Eng , Mail to, email adress
Second Line Facebook Linkedin

while in Arabic second line is Linkedin,Facebook

Q3 : I guess it should be working however it shows Menu f0c9 and القائمة f0c9

Instead of showing Menu icon (Three dashed lines) it shows the code you provided f0c9

Please check and advise, Thanks

[Paul RModerator]

Hi,

1. You can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
.rtl .x-topbar .x-social-global {
    width: 64px;
    margin: 4px auto 5px;
}

.rtl .x-topbar .x-social-global a {
    float:left;
}
}

2. Backslash doesn’t work well in custom > css

Please add this in your child theme’s style.css instead

@media (max-width: 979px){
.rtl .masthead-inline .x-btn-navbar {
    float: right;
}
.rtl .x-navbar i.x-icon-bars:before {
    content: "\f0c9 القائمة" !important;
}
.x-navbar i.x-icon-bars:before {
    content: "Menu \f0c9" !important;
}
}

Hope that helps.

[marwantahaParticipant]

What if i’m not using any child theme, Is there any other solution for that ?

If not, Kindly mention a link that should illustrate how to setup/deal with child themes because I’ve never dealt with it .. Thanks a lot.

P.S hopefully there would be another way than using child theme just to avoid the hassle. Thanks again

[FriechModerator]

Hi There,

Custom CSS on Customizer and Custom CSS on Cornerstone is the alternatives if you don’t have the child theme, but they don’t play well with a backslashes, so we advice to install the child theme. You can install the child theme like how you installed the parent X|Theme, you can download the zip file here. After you successfully uploaded the child theme activate it under Appearance > Themes. After activating child theme you need to reset your menu and sidebars (if you have any).

We also advice that before you do the transition to child theme, please save your customizer settings under Addons > Customizer Manager > Export.

Child theme will save you from hassle in the long run.

Hope it helps, Cheers!

[Author]

Posts