# How To Change Header And Menu Colors In Astra Theme? (Easily)

Want to change the colors of your header and menus in the Astra theme? Here’s how you can do it in a few simple steps.

Author: Abhijit Rawool
Source: https://abhijitrawool.com/how-to-change-header-and-menu-colors-in-astra-theme/
Published: 2021-03-24T04:57:41Z
Updated: 2021-03-24T09:24:33Z

Want to change the colors of the header and menu of your Astra theme?

That’s what we will cover in this tutorial.

So, let’s get started.  
  

## How To Change The Color Of Astra Header?

**Step 1:** Install and activate the [Astra Pro plugin](/recommends/astra-pro/ "Astra Pro").

**Step 2:** Go to Appearance > Astra Options and activate the Colors & Background Module.

<img loading="lazy" decoding="async" width="781" height="1024" src="/wp-content/uploads/2021/03/activate-colors-and-background-module-of-astra-781x1024.png" alt="Activate colors and background module of Astra">

**Step 3:** Go to the front-end of your website and activate the WordPress Customizer.

**Step 4:** Now, go to Header > Primary Header in the WordPress Customizer panel.

**Step 5:** Scroll down until you see the Background option. You can change the Header background color here.

<img loading="lazy" decoding="async" width="583" height="1024" src="/wp-content/uploads/2021/03/change-header-background-color-in-astra-583x1024.png" alt="Change header background color in Astra">

Okay! But what about the free version of the Astra theme? Can you change the header color in that version?  
  

## How To Change Header Background Color In The Free Astra Theme?

**Step 1:** Go to the front-end of your website and activate the WordPress Customizer.

**Step 2:** Now, go to the Additional CSS section.

<img loading="lazy" decoding="async" width="943" height="1024" src="/wp-content/uploads/2021/03/additional-css-option-943x1024.png" alt="Additional CSS option">

**Step 3:** Here, insert the below code.

```
.main-header-bar {
	background-color: #000000;
}
```

You will need to change the hex code #00ff00 to the hex code of whatever color you want to set as the background color of your header.

Keep in mind that I am not a coder. So the above code might not work for you. And even if it does, it might stop working if the Astra theme developers change the CSS class “main-header-bar” that currently defines the Astra header.

I am not really in favor of writing any code to customize the look-and-feel of WordPress. That’s because it becomes really difficult to maintain that code for years to come.

So, I would suggest that you invest a little in the Astra Pro plugin, which will make it very easy to do all sorts of customizations.

With the Astra Pro plugin installed, you can just click some settings to customize your website as you want.

Alright! Now coming to the menus…

**Related Further Reading:**

-   [Astra vs Genesis Theme – Why Comparing These Two Themes Is Stupidity](/astra-vs-genesis/)
-   [Astra Theme Review – Why I Am Using Astra Since 2017](/astra-theme-review/)
-   [How To Remove Page Title In Astra Theme? \[Without Code\]](/how-to-remove-page-title-in-astra-theme/)
-   [How To Add A Slider In The Astra Theme? \[2 Different Methods\]](/how-to-add-slider-in-astra-theme/)  
      
    

## How To Change The Menu Color In Astra Theme?

**Step 1:** Install and activate the [Astra Pro plugin](/recommends/astra-pro/ "Astra Pro").

**Step 2:** Go to Appearance > Astra Options and activate the Colors & Background Module.

**Step 3:** Go to the front-end of your website and activate the WordPress Customizer.

**Step 4:** Now, go to Header > Primary Menu in the WordPress Customizer panel.

**Step 5:** Scroll down until you see the Menu options. Here, you can change the menu background color. You can also change the menu link/text color here.

<img loading="lazy" decoding="async" width="765" height="1024" src="/wp-content/uploads/2021/03/change-menu-color-in-astra-765x1024.png" alt="Change menu color in Astra">

Okay! But what about the mobile menu background color?  
  

## How To Change The Mobile Menu Background Color In Astra Theme?

**Step 1:** Install and activate the [Astra Pro plugin](/recommends/astra-pro/ "Astra Pro").

**Step 2:** Go to Appearance > Astra Options and activate the Colors & Background Module.

**Step 3:** Go to the front-end of your website and activate the WordPress Customizer.

**Step 4:** Now, go to Header > Primary Menu in the WordPress Customizer panel.

**Step 5:** Scroll down until you see the Menu options. Here, click on the small Desktop icon until it changes to the Mobile icon. Now, you can change the mobile menu background color. You will also be able to change the mobile menu link/text color here.

<img loading="lazy" decoding="async" width="1024" height="651" src="/wp-content/uploads/2021/03/change-mobile-menu-color-in-astra-theme-1024x651.png" alt="Change mobile menu color in Astra theme">

**Interesting Further Reading:**

-   [How To Add A Search Bar In The Astra Theme Without Code?](/how-to-add-search-bar-in-astra-theme/)
-   [How To Change Menu Font Size In Astra? (7 Simple Steps)](/how-to-change-menu-font-size-in-astra/)
-   [How To Change Header Background Color In Astra Theme (No CSS)](/how-to-change-header-background-color-in-astra-theme/)  
      
    

## Video Tutorial

<iframe loading="lazy" title="How To Change Header And Menu Colors In Astra Theme?" width="500" height="281" src="https://www.youtube.com/embed/fch5r7E1zrM?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

[Download Website Builders’ Toolbox](/toolbox/)

  

## Things To Keep In Mind…

While it sounds like a good idea to find a CSS code to customize your website right now, it becomes difficult to maintain this code in the long run.

So, it’s always better to invest a little in your website and get the necessary tools to customize your website without writing any code.

This will save you a lot of headaches for years to come.