WordPress.org

Ready to get started?Download WordPress

Forums

Please Advise Me on What to Do With The Header Text? (12 posts)

  1. agfreesafety
    Member
    Posted 1 year ago #

    The owner of this site wanted their logo on the banner, and as you can see, it pushed the site's header text down.

    Since adding the logo, the banner has gotten incredibly long (vertically).

    Of course, I could always remove the header text, but it's a keyword phrase that was found via extensive SEO keyword research.

    If I remove the title in the header, I'm afraid that it will reduce their chance of eventually getting on the front page of Google for that keyword phrase.

    Can you please provide some advice on what I can do in this situation?

    Thanks for your help

  2. agfreesafety
    Member
    Posted 1 year ago #

    Is it possible to keep the header text in the code as header text, but hide it?

    That's the only alternative I can think of, other than putting the header text to the right of the logo.

  3. michael.mariart
    Member
    Posted 1 year ago #

    I'd keep the header text, but float it to the right of the logo. That will give you a bit less vertical space. You can always reduce the size of that text in your stylesheet if you want it to be smaller.

    One suggestion is to NOT hide the text like that. I can't stress that enough. If Google finds you cloaking (hiding) text on your site, and especially when it's a major keyword of the site, it will either move you so far down the results list you'll never get found, or it will remove the site completely. Hiding text is one of the biggest "don't do"'s out there.

  4. agfreesafety
    Member
    Posted 1 year ago #

    Thank you for the information. Might you be able to give me a hint as to how I could float those words over to the right of the logo?

    And thank you for the information regarding Google, I was not aware of that.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You can likely change the layout of the header using CSS, but without seeing the site live, it's impossible for anyone to give you any specific help with the code you'd need to use.

  6. michael.mariart
    Member
    Posted 1 year ago #

    The "actual site" was linked in the original post. :)

    What about something like...

    h1.site_title {
    float: left;
    }

    But, you will most likely have to play around with the CSS of the other elements as well. It's not simple, but as you're the developer/designer you can surely do something that easy, right?

  7. oxfordian3
    Member
    Posted 1 year ago #

    If you edit the style.css sheet (which you can do in the Dashboard via the Appearance > Editor section) you might repair the header layout with the following declarations:

    #branding .fleft { width: 660px; }
    #branding .fright { width: 268px; }
    #branding .fleft img { float: left; }
    #branding #site-title { float: left; }

    It would be best if you know all the details about CSS editing rules, etc. But at the simplest level, if you place these commands at the very bottom of the file, they'll override other declarations, and might fix the layout.

    Note that even a simple typo or mistake within a CSS file can break the entire layout of the site. So you should be comfortable with knowing how to edit the CSS again and revert any changes if it doesn't work out and you need to go back to the existing version.

  8. agfreesafety
    Member
    Posted 1 year ago #

    If you edit the style.css sheet (which you can do in the Dashboard via the Appearance > Editor section) you might repair the header layout with the following declarations:

    #branding .fleft { width: 660px; }
    #branding .fright { width: 268px; }
    #branding .fleft img { float: left; }
    #branding #site-title { float: left; }

    Thanks! As you can see on the website now, it definitely helped.

    Do you have any other suggestions as to how I can make it look better?

  9. oxfordian3
    Member
    Posted 1 year ago #

    Looks pretty nice to me for its purpose. A good adaptation of the BlogoLife theme.

    Cheers!

  10. agfreesafety
    Member
    Posted 1 year ago #

    How do I move the header text, so that it's balanced in the center of the banner? As you can see, it's now adjusted slightly to the left a bit much.

  11. agfreesafety
    Member
    Posted 1 year ago #

    I changed:

    #branding #site-title { float: left; }

    to:

    #branding #site-title { float: right; }

    and now, it's too far to the right haha

    What do I do to get it centered?

  12. oxfordian3
    Member
    Posted 1 year ago #

    You can apply a margin to adjust the text position, for example:

    #branding #site-title { float: right; margin-right: 20px; }

    You can increase/decrease the 20 until the positioning looks best.

Topic Closed

This topic has been closed to new replies.

About this Topic