How do I make the wholw nav bar at the top one colour
AnsweredHello,
Could you assist me please with getting the whole nav bar at the top one color? When I change the header color in CSS it only changes the inside part. What class in CSS do I need to update to make the outside color change too in the nav bar? I would like the background color to be different as this is linked to the header from the color section.
Thank you.
Kind Regards,
Anton
-
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 }
OR
.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.
Team
-
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,
Anton
-
Hello,
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.
3 Comments