How to Change Menu Color in WordPress [A Visual Guide]

How To Change Background Color Of Submenu In Wordpress

The menu of any WordPress website is the most crucial part when it comes to the first impression. That’s why it’s important to know how to change the background color of the submenu in WordPress.

Some WordPress themes provide a means of changing the color of a submenu, but others do not. Even if a theme does not have this option, the color can still be changed with a little effort.

In this blog, I will tell you how to change the background color of the submenu in WordPress. By following all the steps that I’m going to tell you, it will be able easy to customize the color of your submenu.

The topics which I will cover:

  • How to change the menu color in WordPress
  • What is a submenu
  • Why should you change the submenu color

Let’s start with how to change the background color of the menu.

Top 2 Methods to Change the Color of the Menu in WordPress

WordPress menus’ colors are a bit tricky to change, but with a little bit of patience, you can easily change their color. By the time I wrote this article, there were no plugins available to change the color of the menus, but maybe there will be such plugins in the future.

Currently, there are two methods by which a person can change the color of the menu in WordPress:

  1. By using the customize option.
  2. By using CSS.

Let’s begin with the easiest method available.

Method 1: Change the Menu Color Using Customize Option

This method solely depends on which type of theme you are using. The theme I recommend is “OceanWP,” which has the option of changing the sub-menu color. 

Note: There are other themes with the option to change submenu colors, but the recommended one is “OceanWP,” which is entirely free.

Oceanwp Theme
Oceanwp Theme
  • Step 1: Start by hovering over the “Appearance” option and clicking on the “Customize” option. It will open the customization panel for your website.
Click The Customize Option In The Appearance Section
Click The Customize Option In The Appearance Section
  • Step 2: After scrolling down, click on the “Header” option.
Click On The Header Option
Click On The Header Option.
  • Step 3: Next, click on the “Menu” option, which opens the settings for your menu bar.
Click On The Menus Option
Click On The Menus Option.
  • Step 4: Next, scroll down a bit, and you will see a section labelled “DROPDOWNS STYLING,” which contains all the styling options for the submenu.
All The Color Options Under The Dropdown Styling Section
All The Color Options Under The Dropdown Styling Section
  • Step 5: You will see an option labeled “Background Color,” which manages the background color of the submenu. The number you will enter here will depend on the color you want for the background.
Background Color Option
Background Color Option
  • Step 6: As soon as you enter the code for a specific color, the background color will automatically change.

Note: Check out other options available for changing the color of the submenu. 

Change Background Color Of Submenu In Wordpress
Background Color Changed
  • Step 7: If you’ve decided on the color you want for the submenu, click on the “Publish” button to save the changes.
Click The Publish Button
Click The Publish Button.
  • Step 8: Now go back to your website, and after refreshing the page, go to the submenu of which color you changed.
Submenu Background Color Changed After Refreshing The Page
Submenu Background Color Changed After Refreshing The Page

This method depends on the type of theme that you are using. It isn’t a global solution that anyone can implement on their themes.

Method 2: Change the Submenu Color By Using CSS

Maybe you are using a theme that doesn’t have an option to change the color of the submenu, and you don’t want to change the theme just because of it. It is where CSS coding is helpful. With a basic grasp of CSS, you can easily change the color of the submenu.

Note: It can be a bit tricky and time-consuming to change the color of submenu items one at a time.

  • Step 1: Go to the “Appearance” option and hover over it. It will bring up multiple options, but you will click on the “Menus” option.
Click The Menu Option In The Appearance Section
Click The Menu Option In The Appearance Section.
  • Step 2: Locate the list of submenu items that you want to edit.
The Submenu List
The Submenu List
  • Step 3: Select the menu item to edit by clicking on it.
Click On The Submenu Item
Click On The Submenu Item.
  • Step 4: Once the menu item opens, write the code for changing its background color. The code for changing the background color is:
<span style="background-color:#ff0000"></span>

Note: Place the label of the menu item within the coding. By changing the color number, you can select any color you want for the submenu.

Write The Css Code
Write The Css Code
  • Step 5: After writing the code, go to the bottom of the page and click on the “Save Menu” button.
Click Save Menu
Click Save Menu
  • Step 6: If you refresh your website, you will now view the changes.
Submenu Background Color Changed After Refreshing The Page
Submenu Background Color Changed After Refreshing The Page

This method is a touch rough since it will not adjust the background color accurately. The editor must know how to use CSS coding for padding to change it.

What Is a Submenu in WordPress

A submenu is a list of secondary options displayed when you hover over or simply click on a particular option or category. These options are all grouped according to the category in which they appear. 

Submenu Example
Submenu Example

Submenus are helpful for hiding multiple options associated with the same title. The user knows where to find a particular item when he or she visits a website and searches for a specific post or page.

WordPress background colors can be utilized to enhance the visual appeal of submenus, making them stand out and improving the overall user experience.

Why Should You Change Submenu Color

Many WordPress themes come with color schemes that the user may not like. A website owner may want the theme’s features but be put off by the color scheme of the submenu.

Your website’s submenu may feature a color scheme that makes it difficult to read or does not complement the website’s color scheme. By changing it, you can easily increase its visibility.

Changing the color of the submenu WordPress may also depend on the website owner’s preference. The owner may want a specific color for the submenu that holds meaning to them simply because that person likes it. 😂

A good color scheme can also help with the traffic to your website because visitors to a website don’t like a bad color scheme. The overall end-user experience depends on the type of color.

Summary

By using the above-mentioned methods, anyone can easily change the background color of the submenu in a WordPress website.

Maybe in the future, the developer will make it standard for all themes to change the background color of the submenu. Developers may also create plugins to make changing colors easier for users without coding expertise.

If you continue to encounter difficulties, please do not hesitate to ask a question in the comment section. 

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to our Monthly Newsletter

Get monthly updates of WordPress tips, tricks, and tutorials in your email.

Thanks. You have successfully subscribed.

Pin It on Pinterest