How to Change Color Menu in Astra Theme

Since May 2022, when I installed and activated the WP Astra theme on this blog, I’ve been playing around with lots of its customization. Today, I will show you how to change the color menu in the Astra theme.

The WP Astra theme gives you unparalleled possibilities to explore your creativity and designs the blog of your dream. You can customize every part of your WordPress blog visually without editing a single line of code.

In every blog design, the navigation menu plays a crucial role in the user experience. It guides users to navigate through the website pages and indicates every point of entry. Therefore, it’s important that your blog navigational menu is clear and functional to aid user experience.

In today’s post, I will talk you through the 5 steps process to change the color menu in the Astra WordPress theme.

Let’s dive into the tutorial…

5 Steps to Change Astra Color menu in WordPress

Before we get started, if you don’t have the WP Astra theme yet, you can download it through this link. The Astra theme is available both as a free and premium WordPress theme. 

For many beginner bloggers, the free Astra theme is more than sufficient. Unless you want to be unique and brand your business, you don’t really have to upgrade to the premium version. 

But who doesn’t want to be unique and create a brand for itself?

This is where you might consider at some point to get the premium version. And if you want to save up to 63%, you can buy the WP Astra theme through this link when the Black Friday discount offer starts in November. 

Till then, let’s see how you can edit the color menu in the Astra theme.

If you prefer a video tutorial, here is a 2-minute walkthrough of the whole process.

For a step by step text instructions, follow the guideline below.

Step 1. Got to Appearance

Log into your WordPress admin and hover on Appearance from the menu list. Click on customize from the option.

Step 2. Header Builder

On the customizer panel, click on the Header Builder from the list. This action will open a new panel.

Step 3. Click Primary Menu

From the list of options under the Element tab, click “Primary Menu”. 

Step 4. Click Design Tab

Now You need to click on the design tab. This action will reveal the setting panel for the primary menu. 

Step 5. Customize Your Settings

On this page, scroll down to the section “menu color”. There are two options here – Text/link and Background. And each set has 3 color selectors – Active. Hover. Normal.

Clicking on any of the selectors will reveal a panel to change color menu in Astra theme. Pick a color that aligns with your overall blog design and make the menu visible and consistent on the blog.

When you’re done with your color selection, click publish on the page. As you make these changes, you can preview the customizer to see how it looks to users. 

There are other primary menu settings on this page you can play with, let’s go over a few:

• Menu Hover Style – This option let you define what happens when a user hovers on the menu link. You can choose from – None, Zoom in, Underline, or Overline.
• Top Offset – Set the pixel for the submenu container
• Menu Font – Select the font family for the primary menu
• Submenu Animation – Select the animation for the submenu – None, Slide down, Slide up, or Fade
• Border Radius – Set the menu border-radius in pixel

Conclusion…

As you can see from the above description, how to change the color menu in the Astra theme is not difficult. If you’ve been using the Astra theme for a while, now you know how to edit the primary menu without editing your theme file.

If you have any questions or need help related to the Astra theme, don’t hesitate to reach out. Or you can leave your question in the comment section. I reply to every valuable comment.