How To Change Menu Background Style

Question: How do I Change Menu Background Style?

A WordPress training video viewer wrote in and asked the following:

See the two images attached? How difficult is it to change the background in drop-down sub-menus? With the Drop down sub menu.jpg image, you see a green background in the sub-menu. With the dropdowns.jpg image from my site you see there's a white background for the sub-menus. Against a white site body it's graphically difficult to see. Can sub menus of sub menus also have different backgrounds, too?

Answer

Allow me to answer your second question first, "Can sub menus of sub menus also have different backgrounds, too?"

Yes

Now for your first question, "How difficult is it to change the background in drop-down sub-menus?"

In most cases, this is a very easy change that is applied to the site's style sheet. But given the wide variety of WordPress themes and frameworks available, the best I can say is, "It depends." Perhaps the most comfortable approach to answering this question is to demonstrate how I would make a change like this on one of my sites built upon the Genesis Framework and then let you take it from there. If you run into an issue with changing your style sheet, please feel free to contact me.

First, let's gain a basic understanding of styles.

Understanding Styles

If you've ever written a document in a word processor like Microsoft Word, then you're probably already familiar with the concept of styles. In a word processing document, there are generally two ways to apply elements such as bold, italics, bullets, etc. to make a document look as though it's been professionally typeset. The first is through direct formatting and the second is through the use of styles.

Direct Formatting

To format text such as a heading with direct formatting, you select the text, apply bold formatting, and then apply a slightly larger font size than the size that you use for the body text. The process of applying direct formatting can be tedious. It's easy to make mistakes, and you might not get a good looking document. Furthermore, documents that are formatted by direct formatting are difficult to update. If you want to change the look of the document, you must select each element and individually apply the new formatting choices.

Using Styles

In contrast, when you use styles to format your document, you can quickly and easily apply a set of formatting choices consistently throughout your document. A style is a set of formatting characteristics, such as font name, size, color, paragraph alignment and spacing. Some styles even include borders and shading. When styles are used, changes to the style may be applied universally throughout the document. If you change the font size in a style, the font size changes throughout the document wherever that style has been applied.

Web Site Styles

As with word processor documents, web pages are also formatted through the use of direct formatting or styles. For this tutorial, I'm going to skip the direct formatting discussion and go directly to styles. A typical web site uses one or more Cascading Style Sheets (CSS) to format its content. CSS is a style sheet language used for describing the look and formatting of a document written in a markup language such as HTML and XHTML. CSS is a one of the most important specification of the web and almost all web pages use CSS style sheets to describe their presentation. CSS styles are applied to web page elements through class or element ID nomenclatures.

Discover the CSS Behind Your Menu

To make a change to your menu style, you first need to find the element name and see how your theme author designed the CSS. There are a number of ways to do this but for the purpose of this article, I'm going to use the Inspect Element developer tool that's already built into Firefox. Most browsers have similar developer tools or there may be plugins available to provide this type of functionality.

The Inspect Element tool allows you to view the actual HTML source code on the left side of the screen and the CSS for any particular element on the right side of the screen. It also allows you to change the CSS so you can see the results in real time. In the image above, the CSS class for the menu on this page is genesis_nav_menu. You can see the CSS for the genesis_nav_menu class on the right (highlighted). The background-color for the genesis-nav-menu class is #F2F2F2 or a very light gray. I can change this to any color I want by inserting a different color code. If you don't know how to determine color codes, maybe this website can help: http://html-color-codes.info/

Change the CSS File

Now that you've experimented in the Inspect Element tool to find just the right color combination, the last step is to change the CSS in your theme's style.css file. Style.css is always located in your theme's root directory. The easiest way to do this is through the theme editor. You access the theme editor from the Appearance/Editor menu.

The theme editor should open to your currently active theme with style.css open in the editor window. If not, use the drop down on the top right to select your theme and click on style.css when the file list displays on the right.

As a word of caution, if you make a mistake editing a style, it's possible that your site might not display properly. I highly recommend making a copy of the style.css file before you make any changes to it. This way you can easily restore your site should something go wrong.

To finish, search for the element ID or class name that is associated with your menu. Change the background-color attribute to color you selected during your experimentation with the Inspect Element tool. Save your changes and refresh your site's page in the browser. Pat yourself on the back for job well done!