• Skip to content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us Toll Free:

1-844-VIC-FONT (842-3668)

  • Home
  • Portfolio
  • Care Plans
  • Shop
  • FAQs
  • Support
  • Our Team
    • Contact
    • Make Appointment
    • Speakers
  • Resources
    • Free WordPress Video Training
    • Graphic Design
    • Articles
    • Cybersecurity
    • Tutorials
    • Code Snippets
    • Free Plugins
    • 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, 20151 Comment

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 CSS
CSS
1
2
3
4
5
6
7
.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
  • Google+0
  • 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 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. Hitesh Bhasin

    August 2, 2016 at 1:01 am

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

    Reply

Toll free: 844-VIC-FONT (844.842.3668)

Send us an E-mail Fax: 919.205.4446

Affiliate Marketing Disclosure | Comment & Product Review Policy

Privacy Policy | Cookie Policy | Site Map

Copyright © 2003–2019 Victor M. Font Jr.

Return to top of page
Cover image: 5 Things You Can Fix On Your Website In The Next Week To Increase Engagement

Attract New Customers Automatically for Free!

  • Learn how to use the Internet to attract REAL clients
  • Avoid the 3 big mistakes EVERYBODY makes
  • Put this system on AUTOPILOT with the tools the Pros use!

GET YOUR COPY!

This little ebook has helped hundreds of business professionals get real results.
Now it's your turn!

ebook lead capture
Privacy Policy
{"cookieName":"wBounce","isAggressive":false,"isSitewide":true,"hesitation":"","openAnimation":false,"exitAnimation":false,"timer":"","sensitivity":"","cookieExpire":"7","cookieDomain":"","autoFire":"","isAnalyticsEnabled":false}
We only use analytical cookies on our website that allow us to recognize and count the number of visitors and to see how visitors move around the site when they are using it, but they do not identify you individually. They help us to improve the way our website works, for example by ensuring that users are finding what they are looking for easily. Read more about the cookies we use by clicking the Cookie Policy button. By clicking OK you agree to cookies being used in accordance with our Cookie Policy. If you don’t agree you can disable cookies—see the Cookie Policy for more details.
Ok No Cookie Policy