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).
Thread Starter
Igor
(@ianmiles-1)
My site: http://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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Thread Starter
Igor
(@ianmiles-1)
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="http://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.
Thread Starter
Igor
(@ianmiles-1)
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="http://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:
//http://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("http://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…
Thread Starter
Igor
(@ianmiles-1)
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 ?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Why didn’t you apply the text indent style?
Thread Starter
Igor
(@ianmiles-1)
I tried it but it compresses the width of the button, cutting off the house image
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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("http://www.getyourgf.com/images/home.gif") no-repeat;
text-indent: -9999em;
width: 60px;
}
Thread Starter
Igor
(@ianmiles-1)
Awesome.
Would you say it’s best to align it on my artboard in illustrator or using CSS code ?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Thread Starter
Igor
(@ianmiles-1)
Out of interest, where did you find the “width” of 60px ?
