hero title with logo?

[Carol Fong]

Hi Bill,
One more question for now! I didn’t see this as an option: having a logo graphic where the hero title is located. Is this possible?
Thanks,
Carol

[Bill Robbins]

First up you’ll want to hide the logo from the navigation bar on the home page. Here’s how to do that:

1. Go to the Theme Options page and select the Advanced tab.
2. Scroll down to the Custom CSS box and paste this:

   
   .page-template-page-home-template-php #logo {
   	display: none;
   }
   

3. Update your settings.

That should hide the logo there. Then you’ll have to think about how to add in the logo in the hero section. You could use a photo editor to add it to the image in the hero section if it’s not going to change often.

You can also use CSS text replacement to swap out the hero title for an image. Here’s how to do that:

1. Go to the Media section and select Add New.
2. Upload your image and then click the edit link. Look on the right hand side for the file URL box and copy the URL.
3. Then go to the Theme Options page and select the Advanced tab.
4. Scroll down to the Custom CSS box and paste this:

   
   h2.hero-title  {
   	text-indent: -9999px;
   	background: url(https://yoursite.com/image.png) no-repeat center center;
   }
   

   replace the http://yoursite.com/image.png with the URL you copied earlier to your image.

5. Update your settings.

That should replace the title text with your image. Depending on the size of your image, you may have to add a height and width in order for all of it to be seen there.

If you have any trouble, let me know,
Bill

[Carol Fong]

Wow, thank you so much. I will try this out. My client really wanted his logo there.

[Carol Fong]

Hi Bill,
Just an update. Your instructions were perfect. I did have to add the height and width for the entire logo to appear.

Thanks again,
Carol

[Bill Robbins]

Good to know. If the logo is around the same size as the text it’s replacing you often won’t need the height and width, but if it’s larger you’ll need it for sure.

You can also use the height and width to crop the image. That’s how on my site sometimes the logo is white on some pages and on others it’s black. I use an image that has both versions in it and then crop it by the height. I just change the background position of the logo depending on the page to pick the version that’s needed.

If you need anything else, let me know.

Have a great weekend,
Bill

[Author]

Posts