Header Background Color

Support
#1

Hi, I cannot figure out how to change my header background color. All the tutorials look different than my theme settings. Please help.

#2

Hello @Jonassen_18,

Thanks for asking. :slight_smile:

Can you please share website URl for us to take a closer look?

Thanks.

#3

sure, its https://james-2a5e8e.easywp.com/

#4

Hello @Jonassen_18,

Thanks for asking. :slight_smile:

Please add following CSS X > Theme Options > CSS to change header background color:

  .x-navbar {
    background-color: #ddd;
}

Thanks.

#5

Thank you, that turned the header background grey. Do I need my specific color code to add the correct color? How do I add that color code in css? I am clueless about reading code.

#6

Hello @Jonassen_18,

Thanks for updating thread. :slight_smile:

Yes, you need to change the color code as per your requirement. In above code the color code I have shared #ddd signifies light shade of grey color. To help you find the color code I am sharing few link that you can refer to get the corresponding hex color code.


https://www.w3schools.com/colors/colors_picker.asp

Once you have selected the color and it’s hex code, all that needs to be done is relace #ddd.

Hope that helps.

Thanks.

#7

Thank you so much for all your help!

#8

You’re welcome.

#9

I used this method as well but it only changed the color of the navbar and I need to change the header background above the navbar. Can you assist please.

#10

I found out what I needed. For anyone else who needs to change the bg of the logo bar (Header) use the same directions from above except change x.navbar to x.logobar.

.x-logobar {
background-color: #ddd;
}

#11

Glad to hear you got it sorted and thanks for sharing the solution.

#12

I’m having the same issue, but unfortunately neither of the CSS suggestions above are working for me. I believe it’s that pesky !important rule that I found in using Inspector:

Unfortunately, I still can’t change the header color even when I add !important to my CSS, which I think means the Renew 10 Stack’s !important rule is lower in the CSS. Any idea where I might find the original code to remove the Important rule, or other ways to override it?

#13

Hi @brycekingart,

Thanks for writing around! Can you please share the page URL in question so we can take a look?

Thanks!

#14
#15

Hi There,

See this image:

Look for this part:

.x-navbar {
    background-color: ##D6D6D6 !important;
}

It is not working because you have double #. Remove other # and it should give you gray background color after that.

Hope this helps.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.