Adding a House Image to Menu Bar for Responsive Theme

With a link to your site, we would be more able to assist with this CSS related issue…

That said, use a tool such as Firebug, IE9+ F12 Dev. Tools, or Chrome Inspect Element to find the CSS styles used by this LI of the UL of your Menu…Then, either add a style in PHP template and include in your stylesheet or modify the existing styles in use…typically such would be a background image and the text output would be hidden…Note all this work is always best done in a Child Theme as direct edits to themes are lost on theme update(s).

My site: https://www.getyourgf.com
(N.B. Just created a child theme now but have lost some theme formatting)

I’ve installed Firebug. Would I be adding code to style.css, if so, do you have an example of a piece of code linking to an image ?

Thanks.

Using the unique class name give to your home menu item, you can identify it in CSS and apply the following styles;

background: url("path-to-your-house-icon") no-repeat;
text-indent: -9999em;

Actually you may have troubles linking it that way.

What is the unique class name (if I am using Firebug) & why the text-indent if I am using an image ?

Your theme seems to only output the HTML:

<li class="current_page_item"><a href="https://www.getyourgf.com/" title="Home">Home</a></li>

for the home ‘button’

As it does not apply a unique css class (current_page_item is also used whenever the link is the page selected or navigated to).

If you add custom css rules for this style, each ‘current’ menu item will use it.

I think I am correct in that this Theme does support a Custom Menu…if so, create one and review the HTML being output and the styles that will be applied…you should then have a unique css style that can be used.

Followed your instructions, my theme now outputs:

<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-136"><a href="https://getyourgf.com">Home</a>

Could you tell me where in my CSS it identifies the button shape & size?

Please create a style for the specific menu item such as:

.menu-item-136 {
background: url("path-to-your-house-icon") no-repeat;
text-indent: -9999em;
}

You will need to upload the home icon (image) and include for “path-to-your-house-icon”, the full path such as:

//https://www.getyourgf.com/images/home.gif

So after you use FTP to upload the image of proper dimensions, the CSS becomes:

.menu-item-136 {
background: url("https://www.getyourgf.com/images/home.gif") no-repeat;
text-indent: -9999em;
}

There may well be more CSS to make your image ‘fit’ (margin, padding)…you will have to again use your web inspection tool(s) to achieve this and a good working knowledge of CSS…

Thanks for the full description, I’ll give it a shot right now.

Would it be best to use the path: /wp-admin/images
or create a new folder somewhere else, what would you advise ?

Thanks for all the help!

Why didn’t you apply the text indent style?

I tried it but it compresses the width of the button, cutting off the house image

I see.

That’s happening because there is no text in the menu item to expand it.
So you need to expand the menu item another way; by adding a width.
E.g

.menu-item-136 {
 background: url("https://www.getyourgf.com/images/home.gif") no-repeat;
 text-indent: -9999em;
 width: 60px;
}

Awesome.

Would you say it’s best to align it on my artboard in illustrator or using CSS code ?

Align it in your image if you want it looking the same in multiple browsers.

Regarding the SEO query, I’m sure search engines will be forgiving of your hidden word, “home”. By the way, hiding text in CSS doesn’t hide the text from the search engine.

Out of interest, where did you find the “width” of 60px ?