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

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

@ifra

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. 

@laura55

Thank you for your reply.

@ifra

Hello

I tried what you shared but it only change inside the wrapper and not the outside.

Here is the URL to the HC. Can you please assist on how to change the whole header to blue for example?

https://hellocasino.zendesk.com/hc/en-us

Please share the script to use.

Thank you.

Anton

Anton Van der meyden, 

Use this code:

.header,
.user-nav[aria-expanded="true"] {
background-color: blue;
}



Output:

Desktop -



Mobile -

@ifra

Thank you for the quick reply.

It still only wraps on the inside.

In CSS under .header I have this at the moment when I add your code or back ground color here its only doing the inside wrapper.

or if i add here still get the same

Thank you.

Kind Regards,

Anton

@ifra

I got it to work but there is a single white line between the header and the body which is linked to the background color.

Can you please assist on how I change this to red?

Thank you.

Anton

Hey Anton,

Add this CSS to style.css file at the bottom area and then let me know if not works for you:

main {
 display: flex !important;
 flex-direction: column;
}

@ifra

Thank you so much for your help.

This worked.

Have a nice day.

Kind Regards,

Anton

@ifra

Hello,

Can you please assist me one more time?

How do I change the placeholder inside the search box to white and when someone types in the box it is white too?

Thank you.

Kind Regards,

Anton

You can use this code:

.search input[type="search"]::placeholder,
.search input[type="search"]:focus,
.search input[type="search"]:active,
.search input[type="search"]{
  color:#FFFFFF
}

@ifra

Thank you for this it has changed the placeholder text to while.

When some types in the search box can this also be white?

Kind Regards,

Anton

Anton code, I shared above, will work for the same I have tested it.

@ifra

Thank you for all your help.

Kind Regards,

Anton