• 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 / Code Snippet / Create a Genesis Menu Home Icon Button

Create a Genesis Menu Home Icon Button

By Victor M. Font Jr.
June 1, 20152 Comments

Home button iconOne frequently asked question is "How do I add a home button to a menu for a Genesis Framework child theme?" There are many solutions of various complexities to this question found on the web. The solution I'm offering here is simple and purely CSS based. It not only applies to the Genesis Framework, but to WordPress in general and produces the result you see in the image below in a menu I am built for a Swedish eCommerce site. This post teaches you how to do this in three very simple steps.

Scala eShop Home Button

Enable WordPress CSS Menu Classes

The first step is to enable CSS Classes in the WordPress Menu Builder. From the Admin screen, navigate to the Appearance/Menus page and click on the Screen Options button in the upper right of your screen. Then, simply click on the CSS Classes checkbox to enable it.

Enable WordPress Menu CSS

Add CSS Class to menu item

Next, open the home menu item and add the css class to it. In this case I've named my class "home-button."

Add CSS Class to menu item

Add Code to Style.css

Last, find an icon that you like and upload it to your site. Add the following code to your theme's style.css file. This code does two things. It displays the home button icon and hides the text associated with the menu item.

.home-button {
	background: url(images/home.png) no-repeat 50% 50% !important;
	background-size: 24px !important;
	-moz-background-size: 24px auto;
	-webkit-background-size: 24px auto;
	text-indent: -9999em;
}

You may have to adjust the size to suit your specific need. Also, the url referenced in the code is located in the child theme's images directory. If that directory doesn't exist in your child theme, you could create it or store your menu icon in another directory of your choosing. Just make sure you change the url above to reflect the correct location for your icon.

  • 2shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn1
  • Print
  • SMS1

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 to Hitesh Bhasin 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

Comments

  1. Walnut

    March 15, 2019 at 2:45 am

    Really I enjoying your website with effective and useful information. It is included very nice and great post with a lot of our resources.thanks for share. i enjoy this post.

    Reply
  2. Hitesh Bhasin

    August 2, 2016 at 1:01 am

    Wow. Thank you so much. This was very helpful.

    Reply

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....