Header – top bar – different color for desktop and for mobile – not working

You have an option to set different color for top bar in header for mobile and for desktop but isn’t working.

How sholud we fix that?

Hello,

Actually the color works globally, you can only add the different elements for Mobile and desktop but the color will still be the same to top bar for desktop and mobile.

Best Regards.

Ok.
I tried to solve this with css but color on mobile version is not from edge to edge.
Website: http://www.eliteiplrf.com

What do I need to change?

Hello,

As you want to change the top bar color in mobile screens but the color is not applied for the whole top row in your site. To fix this you can use the below css code in Theme Settings >> Custom Css >> Custom CSS for mobile

div.whb-top-bar  {
    background-color: red;
}

Result: https://jmp.sh/fdz3fvX

Best Regards.

I add this css code but background color is not edge to edge. Please see attachment.

Attachments:

You must be logged in to view attached files.

Hello,

The same css code works fine at my end and change the top row color edge to edge. Kindly share your login credentials so I can test the code on your site by myself.

Best Regards.

Ok, in private.

Hello,

Your provided login credentials not working for me. Could you please provide me correct login details so I can help you out.

Best Regards.

I’m sorry. It should work now.

n

Hello,

I used the same css code in your site at Theme Settings >> Custom Css >> Custom CSS for mobile and it works. You can check in the below video that when i used the css and save the changes the top bar color changes edge to edge.

https://jmp.sh/zL7p1u4

Actually you are not using the same css code. You added some other classes that’s why it did not work for you.

Best Regards.

I’m looking site http://www.eliteiplrf.com on my phone and white edges are still showing.

Please check on your mobile devices.
See the attachment.

Attachments:

You must be logged in to view attached files.

Hello,

I have test your site. Again you are using wrong code and not the piece of code that I provides you.

As I am already describes you that you just have to copy this below css code and paste it in the Theme Settings >> Custom Css >> Custom CSS for mobile.

div.whb-top-bar  {
    background-color: red;
}

Just like in the screenshot: https://jmp.sh/EDIjlSm

I already checked your site in mobile devices and it works fine. But the only condition is you have to use our provided css code according to our instructions.
Screenshot from mobile device: https://jmp.sh/FHCjDZh

Best Regards.

Oh, it’s working now.

Thank you!

Hello,

I’m so happy to hear you are pleased with the Theme and Support. XTemos strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts