Support » Fixing WordPress » Hiding H1 title for a logo

  • Resolved ggg377

    (@ggg377)


    Hi. I’ve been wondering how to set up a hidden H1 title for a logo. It’s a popular technique used on many sites such as Facebook, yoast, hongkiat etc. The html implementation usually looks something like this on those sites:

    <div id="title-wrapper">
    <h1 id="title"><a href="http://the-url.com/" title="URL title">Index H1 title</a></h1>
    </div>

    The “Index H1 title” is always hidden and an image shows instead.

    I tried to come up with something similar, but the H1 title shows up for some reason. Here’s my code:

    <h1 id="primary-title"><a href="<?php bloginfo('url'); ?>">my title</a></h1>
    #primary-title {
    margin: 7px 0 0 0; padding: 0;
    width: 141px;
    height: 31px;
    float: left;
    clear:both;
    display: block;
    }
    
    #primary-title a {
    display: block;
    width: 141px;
    height: 31px;
        background-image: url('http://goldenred.web44.net/wp-content/uploads/2013/02/yawn.jpg');
    }
    
    #primary-title a:hover {
    display: block;
    width: 141px;
    height: 31px;
        background-image: url('http://goldenred.web44.net/wp-content/uploads/2013/02/yawnhover.jpg');
    }

    An example of what happens is seen at http://goldenred.web44.net. I don’t want the text “my title” to overlap the logo and I want to be hidden.

    For your convenience here are the relevant theme files:

    header.php http://pastebin.com/Pm1YbzJ2
    style.css http://pastebin.com/iwyrbUYP

    I would be really glad if anyone could help with this 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Have you tried CSS text-indent ?

    Andrew: I haven’t. Wouldn’t it simply shift the h1 text away from its original location (in this case moving black text on a black background), meaning users could still see it upon selection, their cursor would change when hovering over it etc? I could be wrong here.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Wouldn’t it simply shift the h1 text away from its original location

    Yes, but I thought that’s what you wanted? To see the logo and not the text. If I’ve missed the point, please let me know.

    In the case of the sites I mentioned as examples (Facebook, Yoast, etc), I’m pretty sure the actual H1 title doesn’t even get displayed (or at least it isn’t displayed in a noticable way). I would like to do something similar.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I don’t understand your conflict with the text-indent style.
    Facebook is an example where it is used

    Oh, I actually noticed this is how its done on other sites as well. I thought moving content away from the screen, especially H1 titles is usually considered a spammy and forbidden technique, but I guess not. Thanks, I’ll try that and let you know how it goes.

    WPyogi

    (@wpyogi)

    Forum Moderator

    “Hiding” anything using CSS IS potentially not ideal for SEO – as to how much is much debated and it’s also widely done. You should do your own research and decide what approach to take…

    Thanks for that bit WPyogi. I got the code to work, thanks a lot Andrew.

    Considering the layout of the site, it would be really hard to squeeze an actual visible H1 title in there somewhere. I think I may have to go with hiding anyway, especially if it’s a popular practice used by industry leaders.

    I’ll definitely research the topic though and respond upon finding something interesting. Once again, thanks for the tip, WPyogi.

    I’ll mark the topic as resolved for now.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Hiding H1 title for a logo’ is closed to new replies.