Adding Logo with Links in Logo Space
Support Area › Forums › Forward › Adding Logo with Links in Logo Space
- This topic has 7 replies, 2 voices, and was last updated 8 years, 7 months ago by Bill Robbins.
-
AuthorPosts
-
August 28, 2015 at 10:59 #32336Peter RoachParticipant
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,
PeterAttachments:
August 28, 2015 at 12:03 #32341Bill RobbinsModeratorHi 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,
BillSeptember 1, 2015 at 13:42 #32438Peter RoachParticipantHi 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,
PeterSeptember 1, 2015 at 13:45 #32441Bill RobbinsModeratorPossibly. 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,
BillSeptember 1, 2015 at 16:03 #32454Peter RoachParticipantHere’s our dev space where we are staging the usage of this template.
September 1, 2015 at 16:30 #32458Bill RobbinsModeratorThanks for sending over the link. Here’s what I would suggest:
- Go to your theme options page and choose the Advanced tab.
- 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; }
- Update your settings.
Let me know how that goes,
BillSeptember 1, 2015 at 16:38 #32461Peter RoachParticipantAWESOME 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
September 1, 2015 at 16:46 #32463Bill RobbinsModeratorI’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 -
AuthorPosts
- The topic ‘Adding Logo with Links in Logo Space’ is closed to new replies.