Center the logo & remove Text Version of Site Title

Tagged: centering the logo

This topic has 8 replies, 2 voices, and was last updated 10 years, 6 months ago by Wes.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
October 4, 2013 at 10:32 pm #7901
lisao
Customer
Hi there,

Is there a quick and dirty way to center the logo while still using the built in custom header? If not, once I add the logo as a background using CSS per below, how do I then make it clickable?

.site-header {
background: (images/logo.png) no-repeat scroll center 0 transparent;
}

Thanks for any assistance anyone can provide.
October 4, 2013 at 10:33 pm #7902
Wes
Moderator
Check this out and let me know if it helps – https://appfinite.com/topic/centering-header-logo-keeping-home-url-link/

(its a recent post)
October 5, 2013 at 1:34 am #7912
lisao
Customer
Hi Wes, I read it and tried the code but it did not work for me. Here’s a link to the site (it’s a work in progress): http://originalginger.com/demos/yorkhr/. I know that I could add it manually to the css but just wondered if there was an easier way using the header utility.
October 7, 2013 at 5:21 pm #7936
lisao
Customer
We have added the logo into the background of the CSS and it is now centering. For some reason, even though “Show header text with your image” is unchecked, the text version of the logo is still displaying? Are we missing something that needs to be done in the control panel? Link here: http://originalginger.com/demos/yorkhr/
October 7, 2013 at 10:44 pm #7944
Wes
Moderator
I don’t see the header text, so I assume you got this working right?

Also, the image isn’t centering on my end….did you decide to do something different?
October 7, 2013 at 11:42 pm #7948
lisao
Customer
I am unable to get the logo to center properly. It looks centered on a desktop but it’s somehow offset to the right when viewed on an iPad. I can’t seem to find the code that is offsetting it on a tablet. Although we have removed the responsive code we don’t usually have an issue with it scaling down on a tablet. Not sure if you can help given it may be due to us customizing things…
October 8, 2013 at 8:59 am #7955
Wes
Moderator
I figured it out. If you change your width to around 370px it will show up centered. Right now it’s set at 1140px, so it’s basically trying to take up the entire 1140px space of the site….but if you decrease it to 370px it will center like this – http://i.imgur.com/j9bq376.png

The code I’m referring to can be found on line 1229 –
```
.site-header {
	background: url(images/logo.png) no-repeat scroll center top transparent !important; 
	margin: 0 auto; 
	max-width: 370px;
}
```
You can use “width” or “max-width” and it should work fine.
October 8, 2013 at 11:21 am #7960
lisao
Customer
Yep, that did the trick. I thank you sir for your assistance. Should have been able to figure it out on my own but appreciate you sticking with me to figure it out. Cheers!
October 8, 2013 at 11:32 am #7963
Wes
Moderator
You’re Welcome!
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Center the logo & remove Text Version of Site Title’ is closed to new replies.