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

Disclosure: Some of the links in this post are affiliate links. This means, if you click on the link and purchase the product, I will receive a commission at no additional cost to you. Don’t worry, I only recommend products or services that I have personally used and believe will add value to my readers.

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.

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

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.

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.

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:

How To Change The Menu Color In Astra Theme?

Step 1: Install and activate the Astra Pro plugin.

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.

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.

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.

Change mobile menu color in Astra theme

Interesting Further Reading:

Video Tutorial

Download Website Builders’ 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.

About The Author