Using Images instead of Text for page links

  • Unknown's avatar
    urbandescent · Member ·

    Hi all!

    I was wondering if it was possible to use images instead of text in the page links in the header?

    The blog is http://urbandescent.net.au/, any help is appreciated!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    francisbob · Member ·

    Hey there !

    It’s totally possible, what kind of images did you plan to use ?

  • Unknown's avatar
    designsimply · Member ·

    Here is an example that replaces the “Brisbane” menu item in your current main menu with a WordPress logo image as an example:

    #toppart #mainnav ul li.page-item-34 > a,
#toppart #mainnav ul li.page-item-34 > a:hover {
	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat;
	width: 32px;
	height: 32px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#toppart #mainnav ul li.page-item-34 ul {
	top: 32px;
}

    To do this for other menu items, first you must learn how to find the unique identifier for the item where you want to replace the text with an image. Here is a guide that shows how to find CSS using built in browser tools:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    You can use a different image by replacing the link in the url() with a different one. Make sure to adjust the width and height to match your image as needed.

    Repeat the same CSS example for each menu item you would like to use an image for instead of text. Try out the example above to start and post back here if you still have questions after that.

  • The topic ‘Using Images instead of Text for page links’ is closed to new replies.