Home › Forums › WoodMart support forum › Header Builder – Different background color on Mobile & Desktop for Bottom bar

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 1, 2019 at 9:24 am #135493

    Jeriss Cloud Center
    Participant

    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

    August 1, 2019 at 10:43 am #135512

    Jeriss Cloud Center
    Participant

    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.
    August 2, 2019 at 7:37 am #135695

    Elise Noromit
    Member

    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

    August 2, 2019 at 8:15 am #135701

    Jeriss Cloud Center
    Participant

    Awesome !

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

    Thanks

    August 2, 2019 at 10:32 am #135721

    Elise Noromit
    Member

    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

    August 2, 2019 at 11:05 am #135728

    Jeriss Cloud Center
    Participant

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

    August 2, 2019 at 3:39 pm #135779

    Elise Noromit
    Member

    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

    August 2, 2019 at 4:00 pm #135782

    Jeriss Cloud Center
    Participant

    Thanks, you can close this ticket

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Header Builder – Different background color on Mobile & Desktop for Bottom bar’ is closed to new replies.