A Trick for Styling the HOME button in your menu

(3 posts)

Tags:

helgatheviking
Moderator
On a whim I tried something... in my wordpress 3.0 menu I have created a Custom Link for Home. In the label instead of just writing 'Home' I wrapped it in a span.
```
<span class="home">Home</span>
```
and to my surprise that was properly parsed so that now the Home link has a useful span around it!
```
.sf-menu li span.home{
	display: block;
	text-indent: -9999px;
        background:url("images/skull-n-crossbones.png") no-repeat;
}
```
with a little css you can whisk away the text and use a background image!! the display: block; is important as the text-indent property doesn't work on inline elements (such as span).

hope this helps!
Posted 1 year ago #
oakview
Member

Cool idea Helga!

To add to your tip, easily add span tags to all your nav links:

wp_list_pages("link_before=<span>&link_after=</span>");

Then you can style each span however you want.

Posted 1 year ago #
tarpontech
Member

too cool, thx guys!

Posted 1 year ago #

Reply

You must log in to post.