Adding Logo with Links in Logo Space

[Peter Roach]

Hi Bill,

We’d like to better utilize the upper Right area of our site. I was playing around with the details in this post: https://support.organizedthemes.com/forums/topic/adding-2nd-content-area-in-header/

That seems to work nicely. I’m wondering if would be able to put a couple buttons up in that area; likely png files or could they be shortcodes? We’d like to put an actionable Donate and Contact Us button in that area.

Also, if we are using a child theme, I’m guessing we’d need to copy that Header.PHP to the child-theme area and just put the changes in that file.

Thanks,
Peter

Attachments:

1. 

   Capture4.jpg
   

[Bill Robbins]

Hi Peter,

I would roll those changes into a child theme. That would be the best way to approach it.

If you want to use a shortcode there, you’ll need to add it using the do_shortcode template tag. Something like this:

<?php echo do_shortcode( '[shortcode]' ); ?>

Just replace the [shortcode] with your actual shortcode.

Have a great weekend,
Bill

[Peter Roach]

Hi Bill – I have been playing around with this and having trouble understanding how to best position the buttons in that area. Currently, the buttons are being put below the logo and pushing the page down. Ideally, I’d like to have the buttons be to the Right of the logo and not push the page down. Also, is there a way to format the shortcode objects in that space. It would be nice to put a few spaces between the buttons.

Image and File attached.

Thanks,
Peter

Attachments:

1. 

   AM-Buttons.jpg
   

1. AM-header.php_.txt

[Bill Robbins]

Possibly. What would really help me would be to see the live page. I have tools that can edit the CSS on any web page that I use to make modifications like that. That way I don’t have to set up a new WordPress instance and recreate what you’ve got before trying to make those changes.

If you’ll send over the URL, I send back some help for you.

Thanks,
Bill

[Peter Roach]

Here’s our dev space where we are staging the usage of this template.

http://585.ce4.myftpupload.com/

[Bill Robbins]

Thanks for sending over the link. Here’s what I would suggest:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (min-width: 768px) {
   
   	#logo {
   		float: left;
   	}
   	
   	 #extra-content {
   	 	margin-top: 40px;
   	 }
   
   }
   
   #logo {
   	text-align: center;
   }
   
   #extra-content {
   	text-align: center;
   }
   
   #extra-content a {
   	display: inline-block;
   	margin-left: 10px;
   	margin-right: 10px;
   }
   

3. Update your settings.

Let me know how that goes,
Bill

[Peter Roach]

AWESOME Bill! That was the ticket, thanks for helping out. One more item, the MaxButtons has a set of fonts that includes images for FB, LinkedIN, and Youtube. I’m wondering it would be possible to put those shortcodes in the toolbar area. Currently, I am using the Class styles and put the social icons in second Menu bar and formatted to the Right side. Sorry to bunch up issues and Thanks again for your help! PR

[Bill Robbins]

I’m glad that helped out. There is a plugin called Nav Menu Images (https://wordpress.org/plugins/nav-menu-images/) that will let you add an image to a WordPress navigation menu. You could use that to replace the default icons with an image that you choose. I don’t believe you could use it with a shortcode, but if you can pull out the image that the shortcode uses, you can add it this way.

If you go that route, you’ll need to add this to your Custom CSS to remove the default icons and make the new ones visible:

.screen-reader-text {
	position: static;
	top: auto;
	left: auto;
}

#menu-social-media li a::before {
	display: none;
}

Take care,
Bill

[Author]

Posts