Okay
  Public Ticket #3118857
Header Background Color
Closed

Comments

  • Andy Grenier started the conversation

    I would like my header and footer background area to be rgb(0,0,0) like the rest of my section backgrounds and page border. Can you tell me how do I update this?

  • Andy Grenier replied

    I'm also interested in making the sticky header background black. Thanks so much!

  •  1,893
    Support Agent replied

    Hi Andy,

    For footer section, if you select color scheme 'dark font, light background' it should change the background color.

    Regarding the header and sticky header, please try the following code.

    .btTransparentLightHeader .mainHeader {
        color: #000;
        background: #fff;
    }
    .btHasAltLogo.btStickyHeaderActive.btMenuHorizontal.btTransparentLightHeader .mainHeader {
        color: #fff;
        background-color: #000;
    }
    

    Let us know if this helped.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Andy Grenier replied

    Hi! I tried publishing this code to Additional CSS, but nothing changed. Is the somewhere else I should try?

  •  1,893
    Support Agent replied

    Hi Andy,

    We can see the header color has changed.

    1318559309.png

    Were you able to resolve the issue?

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Andy Grenier replied

    Hi again, thank you for the screenshot. I'm seeking header with black background with white font. I now see how I can update it on larger screen size, however, I'm still not seeing this updated on mobile view for some reason. See attached.  

    Attached files:  Screenshot 2022-09-06 7.56.55 AM.png
      Screenshot 2022-09-06 7.56.46 AM.png

  •  1,893
    Support Agent replied

    Hi Andy,

    For mobile screens, please try the following code.

    .btMenuVertical .btVerticalHeaderTop {
        background: #fff;
    }
    .btTransparentLightHeader .btVerticalMenuTrigger .bt_bb_icon:before {
        border-top-color: #000;
    }
    .btTransparentLightHeader .btVerticalMenuTrigger .bt_bb_icon:after {
        border-top-color: #000;
    }
    .btTransparentLightHeader .btVerticalMenuTrigger .bt_bb_icon .bt_bb_icon_holder:before {
        border-top-color: #000;
    }
    

    For sticky header on mobile, you can try this code.

    .btHasAltLogo.btStickyHeaderActive.btTransparentLightHeader .btVerticalHeaderTop {
        background-color: #000;
    }
    .btHasAltLogo.btStickyHeaderActive .btVerticalMenuTrigger .bt_bb_icon:before {
        border-top-color: #fff;
    }
    .btHasAltLogo.btStickyHeaderActive .btVerticalMenuTrigger .bt_bb_icon .bt_bb_icon_holder:before {
        border-top-color: #fff;
    }
    

    Let us know if this helped.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Andy Grenier replied

    Thanks so much. This is all working great. The only item that Durant seem to be working for me is changing the footer section.  I can't seem to find where to update the color scheme to 'dark font, light background' to change the background color to black. Can you point me to where to complete this?

  •  1,893
    Support Agent replied

    Hi Andy,

    If the footer is created as a static page, you can change color scheme of the section.

    9786924607.png


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Andy Grenier replied

    Thanks again! This resolved my issue!

  •  1,893
    Support Agent replied

    You're welcome! Glad we could help. Let us know should you need any additional help.

    If you are satisfied with our support or you like our product, please consider leaving us a rating. We would really appreciate it! Thanks!

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!