Adding Another image/button to Header of site

[Peter Roach]

Hi Bill

We would like to add another button/Image to the header.php file. Currently we place two buttons in the upper right corner. We’d like to place this image to the Left of those buttons and equally spaced.

http://associatedministries.org/wp-content/uploads/2015/12/AP4H-CallHelpWWW.png

I’m thinking it will fit cleanly and help visitors find that number. I’m wondering how to format the echo command in that section?

Here’s the code segment we currently run in that area.

<div id=”extra-content” class=”clearfix”>

<?php echo do_shortcode( ‘[maxbutton id=”31″]’); ?>

<?php echo do_shortcode( ‘[maxbutton id=”32″]’ ); ?>

</div>

FYI – I am so thankful we chose this theme and your support is TOP Notch!!

Best,
Peter

[Bill Robbins]

Hi Peter,

You might try using this instead:

<div id="extra-content" class="clearfix">
	<a href="tel:+12536823401" style="display: inline-block; margin-right: 10px"><img src="http://associatedministries.org/wp-content/uploads/2015/12/AP4H-CallHelpWWW.png" alt="" /></a>
	<?php echo do_shortcode( '[maxbutton id="31"]'); ?> 
	<?php echo do_shortcode( '[maxbutton id="32"]' ); ?> 
</div> 

See how that works out.

Take care,
Bill

[Peter Roach]

Hi Bill –

That has in the ballpark, but it pushed down the two other buttons. The new button is bit higher in the page. It’s also cool to tag that phone number on the new button! If we can align all three of those, it would be a sealed deal!

Best,
Peter

[Bill Robbins]

Good Morning Peter,

See if this will work to line those up:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Look down for the advanced section and click on it. Then choose Custom CSS.
3. In the box there, add this:

   
   @media only screen and (min-width: 1024px) {
   
   	#extra-content .maxbutton {
   		position: relative;
   		top: -14px;
   	}
   
   }
   
   @media only screen and (min-width: 520px) and (max-width: 767px) {
   
   	#extra-content .maxbutton {
   		position: relative;
   		top: -14px;
   	}
   
   }
   

4. Save your changes.

Take care,
Bill

[Author]

Posts