Archived topic
Placing a callout image/link in center of header.
6 replies · Started by Craig on December 7, 2016
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
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.
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!
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
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
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 Support: 866-443-8238</h4>
</div>
<div class="grid-33 header-right">
[widget id="lsi_widget-2" title="0"]
</div>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 :)
