header widget area problems

[Mira]

Hello,

I am having an issue with the header widget area on two of the 4 language-versions of our website. I have set the settings for full width pages with your help a while ago, but I am not sure this has anything to do with it.

The Header widget is a slider created by a plugin, since it has to be different in all languages.
It shows correctly on german and english, but on the arabic and russian version it only shows half. The other half is overplayed by a grey area and so is the header menu. You can see on any page, for example here: https://www.psychosomatik.com/ar/من-نحن-about-us/

Now, in the weaver extreme plus per page options, I have used the example code given for “pr page style” ( #wrapper{max-width:100%;} #header{width:80%;margin-left:auto;margin-right:auto;} #container{width:80%;margin-left:auto;margin-right:auto;} #colophon{width:80%;margin-left:auto;margin-right:auto;}) and that fixes the problem somewhat, but not totally. There is still a grey margin to the right and obviously with these settings, the page is not full width any more. When I go to 100%, the same problem occurs again and the header widget “breaks”. This is the “fixed” page: https://www.psychosomatik.com/?lang=ar

If I were not able to fix this and had to switch of the hero slider and menu plugin, is there a way to recreate this layout with the per page options? (Featured image? header image? can I have a slider in the header?)

Thank you so much for your help, this problem has is really been driving me crazy and I would love to fix it any way possible.

Thank you,

kind regards,

Mira

 

 

[scrambler]

It seems to be coming from a float right property of the RTL setting.

Try adding the CSS rule below and tell me if it then looks the way it is suppose to. For me it makes the widget area and top fyll width.

#header-widget-area .widget {float:none;}

 

[Mira]

Yes! That fixed it! Fantastic! Thank you very much.

Just one more question. I tried to add that CSS global via the customiser and that did not work, only on a per  page setting. Is there a way to add that rule global?

[scrambler]

The rule can go in the theme Global Custom CSS Rule box.

If it does not work there try to add !important

#header-widget-area .widget {float:none !important;}

If it still does not, post back with the rule in place and a link to the page showing it not working so I can see what is going on

[Mira]

unfortunately, that did not work. here is a link to an affected page.

من نحن (About us)

If not, I can do it page by page, no problem. I am just so happy there is a solution!

[scrambler]

If I go to the page you linked to, the rule is active and the header is normal.

If you are not seeing that, you probably have a cache issue

[Mira]

Correct, I forgot to clear the cache! Sorry, it is late here.

Thank you so very much for your help!

[Author]

Posts