Astra Theme Change Color Of Menu Text In Header
This post may contain partner links. This does not affect the price you pay.
In this post, we will be adjusting the text menu color in the header of the Astra Theme. Much of the confusion around this topic seems surrounds setting the menu text color for both the regular header and the transparent header, which we will cover.
Astra theme is a wonderful WordPress theme that has the ability to customize the color of the text in the menu, and this tutorial will walk you through the steps.
Before getting started, make sure you are logged in to your WordPress site with the Astra Theme installed.
Steps To Adjusting The Astra Theme Menu Text Color
Below you will find all the steps required to change the color of the menu text in your Astra Theme. You can follow the video tutorial above, or follow the written steps below.
1. Go To The WordPress Customizer
From the Dashboard of your site, Select Appearance > Customize.
2. Adjust Normal Header Menu By Clicking The Menu Pencil On Your Site
Once you are in the Customizer, the first thing to try is clicking the menu pencil at the top of your site.
Then click Design tab, and scroll down to menu color. This is where you adjust the normal header menu color.
This will not adjust the transparent header menu color.
3. Adjust Transparent Menu Text Color
If you have the transparent menu installed on some of your pages, you need to pick Header Builder > Transparent Header from the Customizer.
Then, click Design Tab, and under Menu Color Text, adjust the color. This will adjust the menu text of your header, whenever the transparent header is active.
Now, any page that uses the transparent header will use the text color that you choose from this menu.
You might have two headers in your Astra Theme
The difficulty in changing the menu text seems to stem from the fact that with the Astra Theme, you might need to set two different headers. If some of your pages and your posts use the regular header, then set that one (in both desktop and mobile).
If some of your pages use a transparent header, set that one (in both desktop and mobile) so that pages that have transparent header enabled.
Concluding Thoughts
Keep in mind that you might need to program menu text color for two headers in Astra if you are using a transparent header. For example, this site uses the transparent header on some pages, while all posts use a regular header.
To make it slightly more complicated, you need to test menu color on both desktop and mobile, if you have mobile transparent header enabled. This site does not enable transparent header on mobile, so on mobile, it defaults to the regular header.
