WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Hiding H1 title for a logo (9 posts)

  1. ggg377
    Member
    Posted 1 year ago #

    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 :)

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you tried CSS text-indent ?

  3. ggg377
    Member
    Posted 1 year ago #

    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.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  5. ggg377
    Member
    Posted 1 year ago #

    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.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  7. ggg377
    Member
    Posted 1 year ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    "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...

  9. ggg377
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.