WordPress.org

Forums

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

  1. jernatety1
    Member
    Posted 2 years 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 Nevins
    Forum moderator
    Posted 2 years ago #

    Let's see your site

  3. jernatety1
    Member
    Posted 2 years ago #

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

  4. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

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

  5. stephencottontail
    Moderator
    Posted 2 years ago #

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

  6. jernatety1
    Member
    Posted 2 years 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 Nevins
    Forum moderator
    Posted 2 years 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 2 years 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
    Moderator
    Posted 2 years 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 2 years ago #

    Ya tried everything. That just goes behind the logo.

  11. jernatety1
    Member
    Posted 2 years 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.