• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / How To Change Menu Background Style

How To Change Menu Background Style

By Victor M. Font Jr.
June 26, 2014Leave a Comment

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?

Drop down sub menu
Image from video
LVV Drop downs
Menu from Viewer's Site

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.

Inspect Element in Firefox

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.

Edit_Themes

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!

  • 4shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn4
  • Print
  • SMS0

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2022 Victor M. Font Jr.

Return to top of page
Posting....