button below home nav tab

[Dee]

Hi there,

I am building a website for a project of the Theosophical Society. You can see the test design at: http://pjoweb.nl/adyar1

Instead of the ‘HOME’ text, my client would like to have the small logo of the organization on the home tab of the nav bar, like you see here: http://ts-adyar.org/

What piece of code do I need for this?

I haven’t uploaded the image yet, but in your answer you may give me a fake image url of course.

Thanks in advance,
Dee

[Chinmoy Paul]

We already created a CSS for home menu. So you can understand how it will work.

.genesis-nav-menu .home a::before {
    content: "";
    display: block;
    font-family: "Dashicons";
    font-size: 21px;
    left: 50%;
    margin-left: -14px;
    margin-top: -17px;
    position: absolute;
    top: 50%;
}
.genesis-nav-menu .home a {
    display: inline-block;
    font-size: 0;
    height: auto;
    position: relative;
    text-align: center;
    width: 25px;
}

Here is some tips

1. http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item
2. Add Home icon to the Primary Menu (http://www.simpleprothemes.com/configure-navigation-menus-in-flex/)

[Dee]

Will try it out, thnx for the sample code!

[Author]

Posts