Centering Logo On Landing Page & Alternative Logo

[Tammy Scott-Wigens]

Hi Bill,

Another question – three parts to it…

Can you center the logo on the landing/home page? The template doesn’t seem to provide this option so I’m assuming it must be done with the Css coding.

Also, I saw a section in the customization area where you can us an alternative logo? What is this for? I’d like to have a different logo on the menu/navigation bar for the secondary pages (every page except the landing page). Is this possible? In my case, I’m wanting the lion logo on the landing page and then I want to use the lettered logo in the attention widget below the landing page as the alternate/secondary logo.

If the second logo is possible, what is the ideal image file size for the left side justification on the menu bar?

Thanks,

Tammy

[Bill Robbins]

Hi Tammy,

The idea behind the alternative logo is this. You upload the logo in the customizer that you’d like to have on most pages in your site. Then if that logo doesn’t work right with the hero image on another page, you can use the alternative logo instead. That keeps you from having a white logo on an light colored hero image for example. It’s in the same location as the default and only appears when you specify it on a specific page.

In the demo, the default logo is black, but on the video page (http://demo.organizedthemes.com/finesse/video-hero/) I use a white, alternative logo instead so it will be more visible.

---

If you’d like to center your logo on the home page, this is what I would suggest. The hero title field accepts HTML so you can place an image there. That’s what I would do to center the logo on the home page.

Go to the media library in your WordPress dashboard. Upload or find the logo you’d like to use there and click on it. You can then get the media file URL to that image and copy it. Then in the field for the hero title place this:

<img src="http://yoursite.com/image.png" alt="" />

Just replacing the http://yoursite.com/image.png with the URL to the image you just copied. Make sure to get that code directly from the support site and not the notification email as email clients sometimes mess up code.

That should give you an image for the hero title instead of text. You can then add this to your Custom CSS to hide your logo on the home page:

.home #logo { display: none; }

See how that works out for you.

Bill

[Author]

Posts