Support » How-To and Troubleshooting » Clickable Header without Header Text

Clickable Header without Header Text

  • Hi. On this blog: http://blog.naturalkidz.com/ I’m trying to link the header image and hide the Header Text. When I use the code suggested on this page: http://codex.wordpress.org/Designing_Headers (see below) the Header Text still shows and the image is clickable. If I try to make the display “none” then the Header Text disappears but then the image is not cickable. I appreciate any help possible. Thanks, leslie555

    “The CSS would then be styled something like this to enlarge the clickable link area and hide the header text (optional), customized to your own design needs.”

    #header h1 a {
    	width: 400px;
    	height: 100px;
    	display: block;
    	background: url(images/headerimage.gif) no-repeat top left;
    #header h1 a span { display: none; }
Viewing 1 replies (of 1 total)
  • It’s not the image that is clickable, it’s the text. When you hide the text, then you hide the link.

    You should go into header.php and replace the heading text with your image inside the link instead of text – then it will be clickable. You won’t want a border around the image so put this in style.css:

    #header h1 a img {
       border: none;

    Hope this help! 🙂

Viewing 1 replies (of 1 total)
  • The topic ‘Clickable Header without Header Text’ is closed to new replies.