Header Builder – Different background color on Mobile & Desktop for Bottom bar

Dear,

I am currently running on very big limitation of the header builder. It is not possible to assign a different backgrdound color between Desktop & Mobile for every section (Top Bar, Main Header, Bottom Header).

How can I assign different background color the Bottom Header on Mobile?

Please make sure to work on separating those settings between devices in a near update

Thanks

Here is the div that I need to change the background color between Desktop & Mobile.

See attachment

Attachments:

You must be logged in to view attached files.

Hello,

1. Set the transparent color for the row https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

2. Add this code to the mobile

body .whb-header-bottom {
    background-color: red;
    border-color: yellow;
    border-bottom-width: 6px;
    border-bottom-style: solid;
}

Best Regards

Awesome !

Could I bother you to have also the css class related to the “top header” and the “main header” ?

Thanks

Hello,

Add this code

body .whb-top-bar {
    background-color: rgba(9, 33, 67, 1);
    background-position: inherit;
    border-bottom-width: 0px;
    border-bottom-style: solid;
}

Set the colors as per your needs.
Best Regards

Thanks, this is for the top bar.
but I asked also for the “main header” (the section in the middle) please
?

Hello,

Here is the code

body .whb-general-header {
    background-color: rgba(9, 33, 67, 1);
    border-bottom-width: 0px;
    border-bottom-style: solid;
}

Best Regards

Thanks, you can close this ticket

[Author]

Posts