WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
Twenty Eleven Theme:Trying to float text over header logo....NOGO? (11 posts)

  1. jernatety1
    Member
    Posted 1 year ago #

    Hi I'm trying to float text over the header logo to show phone number and contact info. Nothing is working though. When I add padding or margin it just drops the logo down and creates white space. I don't want the logo to drop. The text has to go over it.

    Any

  2. Andrew
    Forum moderator
    Posted 1 year ago #

    Let's see your site

  3. jernatety1
    Member
    Posted 1 year ago #

    This is the build link: http://192.185.169.195/~nostick/

  4. Andrew
    Forum moderator
    Posted 1 year ago #

    On that page which bit of text are you trying to float over the header?

  5. stephencottontail
    Member
    Posted 1 year ago #

    Given the circumstances, it may be easier to edit the header image itself to add your contact info.

  6. jernatety1
    Member
    Posted 1 year ago #

    Ultimately right above the price tag in the banner blue space top right I'd like to have "Contact Us" and immediately below the email address. I've tried all variations of float, z-index, padding, margin etc. and the banner drops with all variations.

  7. Andrew
    Forum moderator
    Posted 1 year ago #

    Is the issue that you can't position the text, or that you can't get the text on the page, or both?

  8. jernatety1
    Member
    Posted 1 year ago #

    Normally I would add the info directly into the image but the client wants both the phone number and email clickable. She also wants a facebook icon.

    It's weird I've never run into this issue with any other template.

    I can't position. Once I edit positioning the text does move but the banner drops down.

  9. stephencottontail
    Member
    Posted 1 year ago #

    Maybe something like this. In your header.php, add:

    <div class="contact">
        <a href="whatever">555-555-5555</a>
        <a href="whatever">fake@fake.com</a>
    </div>

    And in your CSS, use:

    .contact {
        position: absolute;
        z-index: 999;
        top: 2%;
        left: 50%;
    }

    Fool around with the top and left parameters until it looks right.

  10. jernatety1
    Member
    Posted 1 year ago #

    Ya tried everything. That just goes behind the logo.

  11. jernatety1
    Member
    Posted 1 year ago #

    This fixes it.

    Header code, (after </hgroup>):

    <div class="brandbox"><div class="brandbox"><table><tr><td align="center"><img src="images/img.png" /><td><td align="center"><img src="images/img.png" /></td><td align="center"><img src="images/img.png" /></td></tr></table></div>

    CSS:
    .brandbox {
    position: absolute;
    right: 10px;
    top: 10px;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.