Changing the color of the menu background requires a little bit of work. You’ll also be working with some CSS code.

It’s a simple process. But, just to be safe, we recommend that you backup your theme files. You can download the theme files via FTP or use a plugin to backup the website to a cloud storage.

Step 1: Find the CSS ID

The first step to editing the styles for the menu is finding the CSS ID codes for your theme’s menu and header.

To do this, simply load your website in Chrome or Firefox. Then hover your mouse cursor over to the menu. Now, right-click and select Inspect.

Here’s you’ll be able to see a line of code that goes like <header id=”site-header”> The text inside the quotes is the ID of your website’s header.

In this example, we’re using the default WordPress Twenty Twenty theme. The ID for the header and menu will differ from one theme to another. So you’ll need to find it on your own. Or get in touch with your theme’s developer and ask them.

Step 2: Define Menu Background Colors

Once you find the ID for the header, you can go ahead and customize the background colors.

To do this, you’ll have to add custom CSS code to your website.

Go to Appearance >> Customize and select Additional CSS and then copy-paste the following code in the CSS code box.

#site-header {
background-color: #DD33FF;
}

Be sure to edit the ID code with the ID from your theme. And to change the Hex color code with your preferred color. You can find hex color codes using this tool.

Step 3: Change Menu Link Color

You’ll notice that this changes the color for the entire header section. It’s the best approach to changing the design.

If you also want to change the colors of the links, copy-paste the following code in your Additional CSS section.

#site-header li a{
color: #fff;
}

Of course, you’ll have to customize the code with the ID tags used by your theme.

Step 4: Change Mobile Menu Background Color

You’ll also have to manually change the colors for the mobile version of the menu.

Follow the same steps as above to find the ID codes for the mobile menu. It’s usually something like .mobile-menu or .responsive-menu. And then use the following code to change the background colors.

.mobile-menu {
background-color: #DD33FF;
}