Enlarge site identity logo

bizblurb · Member · Jan 4, 2017 at 11:32 pm
Copy link

Add topic to favorites
Hi! I’d like to enlarge my blog logo without compromising image quality or messing up the menu/header look. Is this possible?

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 5, 2017 at 8:29 pm
Copy link
Hi there, I’m not seeing a logo on your site right now. If you can add it in and then let me know, I can see what I can do on enlarging it.
bizblurb · Member · Jan 5, 2017 at 10:51 pm
Copy link
It’s added now. It’s odd because the original image is larger and much crisper quality but it distorts and becomes blurred out when minimized on the site.
thesacredpath · Member · Jan 6, 2017 at 5:52 am
Copy link
Hi, and thanks for letting me know. Your original logo image is 2100px square, and the logo size in Gazette is 60px square, so the software is having to do a boat-load of work in trying to downsize that image, and going that far will most certainly result in degradation.

Given that the software creates that 60px square image off of your original, we are going to have to do a CSS trickery. The first thing I need you to do is to edit a copy of your logo image in your image editing program and downsize it to perhaps 250px square, or something like that – whatever size you wish it to be and the upload that new image to your media library and post the URL of that image here and we can then get to work on getting you what you want.

If you could also, let me know how you want things arranged in the title/logo area.
bizblurb · Member · Jan 16, 2017 at 9:24 pm
Copy link
Sorry for the delay! I have the 250x logo posted. What I’d like to do is replace “The Anthill Moment™” text at the top with an enlarged logo since it’s a bit redundant. Can we do that and somehow maintain crispness for mobile and PC?
bizblurb · Member · Jan 16, 2017 at 9:29 pm
Copy link
Here is the url to the 250x logo.
thesacredpath · Member · Jan 17, 2017 at 7:00 am
Copy link
Hi, I think once you see this you will want to crop and re-upload your image and crop it tight on top and bottom, and perhaps tighter on the sides as well.
```
.site-branding {
	background: url('https://anthillmoment.files.wordpress.com/2017/01/simplified-logo-final-250x250px.jpg') no-repeat scroll 0 0;
	height: 250px;
	width: 250px;
}
.site-branding .site-title, .site-branding .site-title a:hover {
	display: none;
}
```
Once you work over the image and upload the new one, simply get the URL of that image and replace the URL in the background declaration between the quote marks.
bizblurb · Member · Jan 17, 2017 at 11:32 pm
Copy link
I believe I entered everything correctly. I cropped the image tight on all sides but it seems theres still a lot of white space.
bizblurb · Member · Jan 17, 2017 at 11:36 pm
Copy link
The menu is also overlapping the content below when scrolling. I’d like for it to scroll along with everything else if that makes sense.
bizblurb · Member · Jan 18, 2017 at 12:12 am
Copy link
Sorry for the constant messaging.. it also seems that on mobile the image isn’t optimized to fit the screen relative to the rest of the menu so it ends up blurry. In other words, it’s a little large relative to the rest of the content.
bizblurb · Member · Jan 18, 2017 at 3:47 am
Copy link
So I’d like to make the logo flush (just above) with the header image, in line with the main menu.
thesacredpath · Member · Jan 18, 2017 at 10:40 pm
Copy link
I cropped the image tight on all sides but it seems theres still a lot of white space.

… it also seems that on mobile the image isn’t optimized to fit the screen relative to the rest of the menu so it ends up blurry. In other words, it’s a little large relative to the rest of the content.

Since your image is only 91px tall now, let’s change the height in site-branding to 91px like below.
```
.site-branding {
	background:url('https://anthillmoment.files.wordpress.com/2017/01/simplified-logo-final-250x250px1.jpg') no-repeat scroll 0 0;
	height:91px;
	width:250px;
}
```
For the image logo on mobiles, we can use a media query to make it smaller at 600px and narrower screens with the following.
```
@media screen and (max-width: 600px) {
	.site-branding {
		height: 70px;
		background-size: contain;
	}
}
```
The menu is also overlapping the content below when scrolling. I’d like for it to scroll along with everything else if that makes sense.

I’m not seeing that on Firefox, but do see it in Safari and Chrome. Let’s try the following.
```
body {
	padding-top: 0 !important;
}
.site-header {
	position: static;
}
```
So I’d like to make the logo flush (just above) with the header image, in line with the main menu.

Not entirely sure I understand what you are wanting, but let’s give this a try.
```
@media screen and (min-width: 1080px) {
	.main-navigation {
		margin-top: 15.5px !important;
	}
}
```
bizblurb · Member · Jan 18, 2017 at 11:19 pm
Copy link
Exactly what I needed. Thank you!!
thesacredpath · Member · Jan 19, 2017 at 9:15 am
Copy link
Hooray and you are welcome!

No items found.