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

[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

[Tom]

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.

[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!

[Leo]

Hi Craig,

I think you can use GP Hooks for that. Check out this post: https://generatepress.com/forums/topic/2-sides-to-the-header-widget/#post-228923

[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

[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>

[Tom]

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 🙂

[Author]

Posts