# How to change header color?

**URL:** <https://colorlibsupport.com/t/how-to-change-header-color/18508>\
**Category:** Activello\
**Created:** [October 15, 2017, 10:39am UTC](https://colorlibsupport.com/t/how-to-change-header-color/18508 "2017-10-15T10:39:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucidlife](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/l/bb73d2/32.png) [@lucidlife](https://colorlibsupport.com/u/lucidlife)\
**Post date:** [October 15, 2017, 10:39am UTC](https://colorlibsupport.com/t/how-to-change-header-color/18508/1 "2017-10-15T10:39:10Z")

</div>

Sorry, if this is a basic question, but I’m learning how to developed my own site for the first time, so I’m new to all this.

Question says it all.

How would I change the color of the header?

I have a pic for my background, and it doesn’t cover the header of my page.

How would I stretch the pic, or change the color.?

Cheers, thanks

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 15, 2017, 12:40pm UTC](https://colorlibsupport.com/t/how-to-change-header-color/18508/2 "2017-10-15T12:40:15Z")

</div>

Hey there,

I hope you are well today and thank you for your question.

You can change the color of the header by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -\> Appearance -\> Customize -\> Additional CSS

```auto
/*change header color*/
header#masthead {
    background: #000;
}

```

Seening this is your first time working on a site, I suggest you send screenshots or a link to your website so we can better assist you.

Best regards,  
Support.

---

<div class="post-metadata">

**Author:** ![lucidlife](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/l/bb73d2/32.png) [@lucidlife](https://colorlibsupport.com/u/lucidlife)\
**Post date:** [October 18, 2017, 2:14am UTC](https://colorlibsupport.com/t/how-to-change-header-color/18508/3 "2017-10-18T02:14:32Z")

</div>

Oh yea, sorry! Heres a [link!](http://lifelessl0cid.com/)

---

<div class="post-metadata">

**Author:** ![lucidlife](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/l/bb73d2/32.png) [@lucidlife](https://colorlibsupport.com/u/lucidlife)\
**Post date:** [October 18, 2017, 2:16am UTC](https://colorlibsupport.com/t/how-to-change-header-color/18508/4 "2017-10-18T02:16:59Z")

</div>

This didn’t do what I want to do, but this is good to know. If you look on my site the vary most top is white. Like, the picture background doesn’t fit the site.

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 18, 2017, 11:18am UTC](https://colorlibsupport.com/t/how-to-change-header-color/18508/5 "2017-10-18T11:18:57Z")

</div>

Hello there,

This CSS code will allow you to change the color of the nav bar:

```auto

/*Nav bar color*/
.navbar.navbar-default {
    background-color: red;
}

```

Best Regards,  
Support