How to Change the Menu Color in Astra Theme

Menu color plays a significant role in the design of any website. Your navigation menu is extremely important when it comes to producing fantastic user experiences. It facilitates visitors’ viewing and access to various parts of your website.

Therefore, your navigation menu must appear and function as you intend.

In this document, we will explain step-by-step the process of how to change the color of the primary menu.

Step 1: From your WordPress dashboard, go to Appearance > Customize or Astra > Customize.

Step 2: Once you are inside the customizer, you will need to click on the Header.

Step 3: Once you are inside the header builder, click on the Primary Menu.

Step 4: Head over to the Design tab. Scroll down to the menu color. You can change the text/link color as well as the background color by clicking on the color selector.

You can adjust the colors of all these options as per your requirements. For example:

There are three different color options. This is how they’ll show up on the website after the above color changes.

• Normal – This is how the menu looks when you first load the webpage. It’s the default appearance of the menu.

• Hover – This is the color that people will see when they hover their mouse over the menu components. This is the color users will see when they hover over menu components.

• Active – The Active state refers to the menu item that is currently selected or being used.

If you’re using a Secondary menu or any other menu, you can change the menu colors from the Design tab. For most websites, the Primary Menu is used, so simply navigate to the Customize > Header > Primary Menu > Design tab.

If you are facing any issues trying to edit the submenu colors, please refer to this article.

Note: Changing the submenu colors for the Primary or any other menu is available with the Colors & Background module of Astra Pro. If you do not see the option to change the submenu colors, please ensure the Astra Pro plugin is installed with the Colors & Background module activated.

Menu color for Transparent Header

Also, if you have a transparent header enabled on your site, the above options might not work for you. In that case, please follow the steps below to change the color of the menu items,

To do so, navigate to Customize > Header > Transparent Header. If you are previewing a page with a transparent header, you can also click the Customize Transparent Header message that appears at the top.

Here, go to the Design tab, and under the menu color option, click the color button to change the menu item color.

For more information about the transparent header, please refer to this article.

If you face any issues, please reach out to our support team. We’re always here to help!