How transform the header image into a logo of 300×50

Hi Chester, you can remove the Header Image from here:

Go to Dashboard
Under the ‘Appearance’ you will see ‘Header’
Go to ‘Header’
Remove the Header Image and upload your Logo accordingly.

There is a problem in that. It is up scaling the image to 1600 × 230 pixels and appearing in same size in front end. I want it to be appear in 300×50 pixel size in front end. How to do that?

Okay. You need to make some changes in the Style sheet CSS file.

But before that, please make sure you crate the Child Theme. Please follow the instruction very carefully:

https://codex.www.ads-software.com/Child_Themes

I am already using Twenty Thirteen child theme as i have mentioned in my first post

It depends how you would position the site title/desc text along with the logo both in normal PC screen and small device screen.

• Remove Header Image from the setting. Theme will automatically injects the CSS to not have a fixed min height for header area.
• Keep the Site title/desc on.
• If you only want the logo display and no text, use any of the CSS image replacement technique to put the logo in.
• If you want both logo and site title/desc text, use CSS :before or :after to put that image in (as pseudo element).
• Some adjustments in a few media queries.

Hey paul, thanks for your reply.

I want the logo display and no text. After removing Header Image from the setting what should i do in css?

please check this site

https://www.successstories.co.in/

this site is not mine, but I would like my logo to be like that.

Correction: The first point in the list in my previous post is wrong. It will inject CSS to not have fixed min height when Header Image removed AND Text set to not display.

I want the logo display and no text. After removing Header Image from the setting what should i do in css?

Make sure the Header Text checkbox is checked to show, and use this code in child theme stylesheet.

/*_____ do logo _____*/

.site-header { padding-top: 20px; }
.site-description {
	position: absolute;
	clip: rect(1px 1px 1px 1px); /* IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
.site-header .home-link {
	min-height: 0;
}
.site-title {
	text-indent: 120%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0 0 10px;
	padding: 0;
	width: 300px;
	font-size: 50px;
	background: url("https://dummyimage.com/300x50/ff0000/fff.png") no-repeat scroll 0 0 / cover  transparent;
}
@media (max-width: 800px) {
	.site-title { width: 210px; font-size: 35px; margin: 0 auto 10px; }
}

/*_____ end logo _____*/

Only change the image url to your logo.

Hey Paul as per your instruction I did everything

Removed the header keeping header text checked

Pasted the code in child theme style.css file pointing the image url to my logo.

But i don’t know whats wrong there still its not working. I appreciate your time for me. A little bit more help here please. Thanks a ton.

No change in front-end appearance after pasting the code.

Did you clear browser cache ?

Ya i did. Still nothing.

You may check this thread. Hope there you get some idea: change-cropping-size-in-twentythirteen

Please make sure your child theme works as it should. If the site is online, link it up so that we can help inspect, or at least see it better.