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 colour menu in the Astra theme.
The WP Astra theme offers unparalleled possibilities to explore creativity and design your dream blog.
You can customize every part of your WordPress blog visually without editing a single line of code.
In every blog design, the navigation menu is crucial to the user experience. It guides users through the website pages and indicates every entry point.
Therefore, your blog navigational menu must be clear and functional to aid user experience.
In today’s post, I will talk you through the five steps to change the colour menu in the Astra WordPress theme.
Let’s dive into the tutorial…
5 Steps to Change Astra Color Menu in WordPress
Before we start, 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 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 colour 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 three colour selectors – Active. Hover. Normal.
Clicking on any of the selectors will reveal a panel to change the colour menu in the Astra theme.
Pick a colour that aligns with your overall blog design and make the menu visible and consistent.
When you finish your colour 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 lets you define what happens when a user hovers over the menu link. You can choose 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 color menu in Astra theme is not difficult.
If you’ve been using the Astra theme for a while, you can edit the primary menu without editing your theme file.
Don’t hesitate to reach out if you have any questions or need help with the Astra theme. Or you can leave your question in the comment section. I reply to every valuable comment.
