How do I make the wholw nav bar at the top one colour



  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Anton Van der meyden :),

    pick the main wrapper class of header, see how I did:



    Here, header class is parent class so CSS would be :

    .header  {background-color: black }


    If you have custom theme then your header parent class would be different (or may be):

    .header-wrapper {background-color: black }


    .header-outer {background-color: black }


    If you share the URL of HC then I can share exact code.

    If any confusion feel free to ask.




  • Anton Van der meyden

    Ifra Saqlain

    Hello Ifra,

    Thank you for the reply.

    It is not live yet to share the URL but I will play with what was suggested above to see if I can get it to work.

    Thank you.

    Kind Regards,


  • Laura Levilly


    Here is my workaround for this, as I use the standard theme:

    1. The header color, as per the pic above, shows only the boxed container. That means that the left and right sides were some other container. 

    2. Turns out that's actually the body of the page. So if you had ".body { background-color: #000000" in the CSS, you will have a fully black page. Then turning .container white overrides .header even with !important.

    3. Instead, I added a gradient from black to white at 180 linear degrees, since the transition is hidden by the hero image anyway. 

    4. Here's what you can do!

    - copy the following code and edit the colors if necessary. Mine was for a black header and white body.

    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 18%, rgba(255,255,255,1) 18%);

    - create a .body class in styles.css and paste the code there

    Tadaaaa! Hope this helps. 


Please sign in to leave a comment.

Powered by Zendesk