Not sure How to Change Menu Color in WordPress? Your website menu is often the first point of interaction for the visitors to explore and access different areas of your website.
It gives them an overview of what your website offers and allows them to navigate it seamlessly. As such, having an eye-catching menu is essential for a superior user experience.
And one critical aspect of a stunning menu design is the color.
Something as small as an inconsistent menu color can make your website look unprofessional.
Luckily, for those wondering how to change the menu color in WordPress or Elementor, there are various easy ways to do so.
In this blog post, we’ll explore how to change color of menu in WordPress using WordPress customizer, plugins, and CSS.
Why Should You Consider Changing Menu Color on Your WordPress Website?
Your website menu is meant to offer more than just a seamless navigation experience; it is the core of your branding and user experience.
If the menu color doesn’t align with your website’s overall design, it can negatively impact the user experience by making it difficult to read the content and even drive visitors away.
Example of a menu created using Navigation Menu Widget by The Plus Addons for Elementor
Here’s why changing your menu color is worth considering:
- Improves readability and accessibility: A menu that blends too much with the background or uses low-contrast colors can be hard to read, especially for users with visual impairments. Choosing the right colors ensures better visibility, making navigation effortless for all visitors.
- Establishes brand identity: Your website’s color scheme plays a huge role in branding. If your menu color clashes with your brand colors, it can make your site look inconsistent or unprofessional. A simple tweak can help reinforce your brand identity and create a cohesive look.
- Increases user experience: Visitors should be able to find what they’re looking for at a glance. A well-colored menu guides users smoothly through your site, reducing frustration and improving engagement.
- Enhances visual aesthetic: If your website looks outdated, visitors might assume your business is too. A simple color update can enhance the overall appearance of your website, giving it a modern appeal without requiring a complete redesign.
Simplify your website experience with a professional-looking menu on your Elementor website. Learn How to Create a Mega Menu in Elementor WordPress Site.
How to Change Menu Color in WordPress [Easy Methods]
Now that you know why changing your menu color matters, let’s explore the different ways you can do that.
1. WordPress Customizer Method
WordPress’s built-in customizer feature is one of the easiest ways to modify your menu’s color and other visual aspects of your website in real time.
When wondering how to change the background color of menu in WordPress, follow these steps-
Step 1: Access WordPress customizer
Log in to your WordPress admin dashboard and navigate to Appearance > Customize on the left menu to open the Customizer interface.
Step 2: Find the menu color options
In the Customizer panel, click on Color options and look for Menu, Header Builder, or Navigation option. (The exact option may vary depending on your theme).
In this section, select the primary or secondary menu you want to customize.
Click on the Design section to find various customization options for menu background color, menu item color, hover color, menu style, and more.
Step 3: Choose and apply new colors
Once you’ve located the menu options, you can use the color picker to choose the color of your website menu.
Plus, depending on the theme, you may also have the option to use theme-specific colors.
You can experiment with different colors and view the change live on the screen in real time.
This gives you complete visibility into how different colors will look on your website, offering higher control over the visual aesthetic of the navigation menu.
Step 4: Save and publish your changes
Once you select the new menu color, click on the Save & Publish button.
Want to design a stunning one-page navigation website for your business? Know How to Create a One Page Navigation Website in Elementor.
2. Plugin Method
If you want more control over the colors and customization of your website menu, a WordPress Menu plugin is your best bet.
For this purpose, the Navigation Menu Widget by The Plus Addons for Elementor is an excellent plugin for building and designing a highly interactive and professional website menu.
From modifying the menu colors to menu layout and customizable elements, The Plus Addons gives you complete control of every design aspect.
Step 1: Install and activate The Plus Addons for Elementor
On your WordPress dashboard, go to Plugins > Add New and search for The Plus Addons for Elementor.
Install and activate the plugin.
Step 2: Enable the Navigation Menu widget
Back on the admin dashboard, go to The Plus Addons > Widgets and search for the Navigation Menu widget.
Turn on the toggle to enable the widget.
Step 3: Add the navigation menu
To use the Navigation Menu widget, add it to your header template in the Elementor editor so the menu is active for the entire website.
Now, go to the menu on the left and click on the Menu Type dropdown to select from the Default create a menu using the default WordPress menu) or Repeater (create a custom menu using a repeater) menu.
Once you select the menu type, you can customize the following options-
· Menu Direction: From the menu direction dropdown, you can choose from a horizontal menu, vertical, or a vertical side menu, depending on your website layout and design.
· Select Menu: From the Select Menu dropdown, choose the menu – primary or secondary that you want to design.
· Menu Hover: The Menu Hover dropdown lets you define the menu behavior. Click here to choose whether the menu will open on hover or click. If you’re wondering how to change the menu hover color in WordPress, you can customize that, too.
· Menu Effects: You can also customize your website menu to add stunning effects to engage the visitors.
Step 4: Style the navigation menu
Under the Style tab on the left menu, you will find various options to customize the design and color of your website menu.
Here, you can modify the menu background, typography, icon, color, icon size, and more.
Plus, you can also customize these settings and set unique styles for different menus across your website, such as your sticky main menu, sub-menu, or mobile menu.
3. Custom CSS Method
Another easy but a bit more technical answer to how to change dropdown menu color in WordPress is custom CSS.
This method allows you the most control over the color and appearance of the website navigation menu, including the menu hover.
Step 1: Open the customizer
On your WordPress dashboard, go to Appearance > Customize (or Editor) to open the theme editor.
Next, go to Styles and click on the pencil icon to open the page on which you want to customize the menu color.
Step 2: Write the custom CSS using CSS rules
To apply the CSS code and customize your main menu color, you need to write a CSS rule that consists of a selector and a declaration block.
The declaration block contains one or more property-value pairs that describe the style you want to apply.
You need to identify the right CSS selector, which is used to target specific HTML elements that you want to style.
For the website menu, you need a CSS selector that targets the menu specifically, which can be
· “.main-menu” to target the main menu container.
· “.main-menu ul li a” to target the links in the menu item.
· “.main-menu li:hover” to target a menu item as you hover over it.
After determining the right CSS selector for your website menu, you can use the “color” or “background color” CSS property to add a new color to the menu.
Here’s an example-
css
.menu-selector {
color: #ffffff; /* Change to your desired color */
}You can also find the CSS selector and ID by right clicking on your website menu and selecting Inspect.
Step 3: Add the custom CSS
Go to the Styles section on the right and find the Additional CSS option to add your custom code.
Paste the CSS code in the Additional CSS section of the customer or your child theme’s style.css file.
Save the changes to apply the new color.
Using custom CSS offers you more flexibility and control over the website design and visuals. Learn How to Add Custom CSS in Elementor for Free.
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
Wrapping Up
If your website design has got you wondering how to change the menu background color in WordPress, you can follow any of the three easy methods mentioned in this blog.
Customizing the website menu color is a simple yet impactful change to elevate the design and visual appeal of your website.
Plus, using the Navigation Menu widget from The Plus Addons is super easy, and you have full control over the aesthetics of your navigation menu.
But beyond the navigation menu, The Plus Addons for Elementor give you access to 120+ more unique widgets for Elementor to help enhance your website design and functionality instantly!
Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!
FAQs on Changing WordPress Menu Color
Can I change the WordPress menu color without coding?
Yes, you can easily change the menu color without writing any code. You can do this using the WordPress Customizer or a feature-rich plugin like the Navigation Menu widget by The Plus Addons for Elementor.
Is it possible to change the color of individual menu items?
Yes, with the Navigation Menu widget from The Plus Addons for Elementor, you can change the color of different menus on your website.
How do I change the color of the menu hover in WordPress?
To change the color of the menu, hover in WordPress, go to Appearance > Customize > Additional CSS on your WordPress dashboard, and add custom CSS.
Why is my WordPress menu color not changing after updating the CSS?
If your menu color isn’t updating after updating the CSS, a cached style or plugin/theme setting might conflict with the change. To fix this, clear your browser and WordPress cache, check for conflicting theme or plugin settings, and ensure CSS is applied to the right selector.
