[Support request] Placing a callout image/link in center of header.

Home Forums Support [Support request] Placing a callout image/link in center of header.

Home Forums Support Placing a callout image/link in center of header.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #252363
    Craig

    Tom –

    Thanks for answering me on prior question. Next topic I can’t seem to find an example for.

    On http://www.getadvantage.com, we would like to put a two graphic links for phone numbers to our sales and support groups.

    Is there a built in mechanism for this I am missing in the Customizer? Or, can you recommend the css (or other) solution to effect this update?

    Thanks!
    Craig

    #252413
    Tom
    Lead Developer
    Lead Developer

    Hi Craig,

    Any examples of what you’re wanting to do?

    If you want your phone numbers to be images, you would need to create them in a program like Photoshop or Gimp and then upload them to your site.

    #252783
    Craig

    Hi Tom –

    Sorry I wasn’t clear. I’m good with how to set the images up, etc., I am just confused on how to put them in the center of the header. Our logo is to the left, our icons are to the right. How do I fit a graphic in the center of the header. Is there CSS I can use, or do I have to get into the PHP?

    See a site like this: dataprise.com

    Thanks!

    #252821
    Leo
    Staff
    Customer Support
    #252857
    Craig

    Leo! Uda!

    Thanks you. I gave it a quick dry run, works as advertised. We’ll dress it up and report back, thanks for the reply.

    Craig

    #253027
    Craig

    Ok, having a touch of responsiveness issue which I can not figure out, here is the css in the GP Hooks Before Header Content. When the screen drops below about 1000px, it gets a bit staggered and ugly. You feedback is gratefully appreciated:

    <BR>
    <div class="grid-33 header-left">
        <a href="http://www.getadvantage.com"><img src="https://www.getadvantage.com/wp-content/uploads/2016/12/AI-Logo-New-Site.png" alt="Advantage Industries Logo" /></a>
    </div>
    <div class="grid-33 header-center">
        <h4 style="vertical-align:middle;">Sales: 410-992-7925&nbsp;&nbsp;&nbsp;&nbsp;Support: 866-443-8238</h4>
    </div>
    <div class="grid-33 header-right">
    [widget id="lsi_widget-2" title="0"]
    </div>
    #253055
    Tom
    Lead Developer
    Lead Developer

    You can add new classes for tablets (768px – 1024px) and mobile (< 768px): <div class="grid-33 tablet-grid-50 mobile-grid-100">

    So there, on desktop we’re 33%, tablets we’re 50% and mobile we’re 100%.

    Let me know if that makes sense 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.