Site Logo

leoceasar18 · Member · May 25, 2017 at 9:39 am
Copy link

Add topic to favorites
Hello guys!

In this template whenever I put a personal logo, it will automatically resize the logo to its fixed width of 520px. I want it put this image as my site logo https://blaineislostph.files.wordpress.com/2017/05/blaine-is-lost-header1.jpg

at the same time, the width will also adjust whenever it will be viewed on mobile. is that possible through css? thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 25, 2017 at 8:30 pm
Copy link
Hi, let’s do this with CSS instead and put the image into the site title div. First thing you will want to do is to crop your original PNG image tightly around the text in that image, upload that image to your media library and then use that URL in the background declaration in the following CSS. It may be that after you do this, we have to make a few adjustments. Lets get that done and then go from there. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
```
#site-branding .site-title a {
	background: url('https://blaineislostph.files.wordpress.com/2017/05/header-one.png') no-repeat scroll center center / auto;
	display: block;
	color: transparent;
}
@media screen and (max-width: 1059px) {
	#site-branding .site-title a {
		background-size: contain;
		background-position-x: left;
	}
}
```
leoceasar18 · Member · May 27, 2017 at 4:16 am
Copy link
Big thanks man! But I have a problem with the code you have provided.
Whenever I save and publish the theme with custom css, the background-position-x: left; is always removed.

Also, the title image is overlapping the menu icon on the right when in mobile view, check the image:

How to fix this? Thanks
thesacredpath · Member · May 27, 2017 at 4:37 am
Copy link
Hmmm, that is strange. I tried it directly in your customizer and it was stripped out for me also. What I’ve done is to use the full background-position declaration (with both x and y). I went ahead and saved it in your customizer. Here is what it is now.
```
@media screen and (max-width: 1059px) {
	#site-branding .site-title a {
		background-size:contain;
		background-position:left center;
	}
}
```
I’ll have to check into that and see why it is getting stripped out. It shouldn’t, it is valid CSS3.
leoceasar18 · Member · May 27, 2017 at 5:30 am
Copy link
Thanks so much! The last problem is the image overlaps in the menu button on the right in mobile view mode.

How to fix this? Thanks
thesacredpath · Member · May 27, 2017 at 10:23 am
Copy link
For the overlap on smaller screens, add this after the other code you have.
```
@media screen and (max-width: 400px) {
	#site-branding .site-title a {
		background-size: 90% auto;
	}
}
```
leoceasar18 · Member · May 28, 2017 at 2:45 am
Copy link
Big thanks man! Really big help! :D
thesacredpath · Member · May 30, 2017 at 3:00 am
Copy link
You are welcome.

No items found.