[Resolved] In the arabic mobile version the logo is not placed correctly

[Hazem]

Hello

My website is multilingual, Arabic and English. In the arabic mobile version the logo is not placed correctly. it should be above the menu, instead it is on the top right corner. i want it to be similar to mobile English version.

[Tom]

Hi there,

Try adding this CSS:

.rtl .header-widget {
    float: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Hazem]

Tom

The problem is solved on the mobile version but it affected the PC version!!
Would you please take a look and solve the whole issue.

Thanks in advance

[David]

Hi there,

try this instead:

.rtl .header-widget,
.header-widget {
    float: right;
}

.rtl .site-logo,
.site-logo {
    float: left;
    margin-left: 10px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hazem]

hello

I tried the code you gave me. It is good but i want the logo to remain above the menu in the middle when i change the language from English to Arabic. I am talking about the Mobile version.

[David]

That CSS that Tom provided here should do that?

https://generatepress.com/forums/topic/in-the-arabic-mobile-version-the-logo-is-not-placed-correctly/#post-837898

Can you add that, clear you caches and let us know. If it doesn’t work, leave the CSS in place so we can take a look

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hazem]

Hello

I informed Tom that i added the code he gave me and it worked perfectly on the mobile view but it affected the PC view. I like the PC view the way it is without the code and i love the mobile view with the code. I added the code so you can check.I appreciate your support

[Tom]

Give this a shot instead:

@media (max-width: 768px) {
    .rtl .header-widget {
        float: none;
    }
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Hazem]

Thanx a lot Tom

Problem is solved

My sincerer regards

[Tom]

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts