No results found. Try again with different words?

Search must be at least 3 characters.

How to Change the Menu Color in Astra Theme

Sidebar Image

Did not find a solution? We are here to help you succeed.

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: Navigate to the WordPress dashboard. Click on Appearance and select Customize.

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

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

Step 4: Head over to the Design tab.

Step 5: 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 like 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 over 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.

You can also change your submenu color from the Customize > Header Builder > Secondary Menu > Design tab.

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

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,

After step 2 above, please click on the Customize Transparent Header option.

Here, navigate to the Design tab, and under the menu color option, click on the color button to change the color of the menu items.

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!

Was this article helpful?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form