How to position logo image in Twenty Ten Child Theme

Don’t use display none on the site title and description, use this instead

#site-title, #site-description {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
}

and these two lines should take care of the logo positioning.

#header {
	padding-top:20px;
}
#branding img {
	margin-bottom:10px;
}

@ paulwpxp. Thanks for your suggestion. I haven’t try it yet. I’m trying to understand what it does first.

It’s the first time I see the ‘clip’ property of CSS. It seems these lines are creating a very small box for the title and description. Is it better than ‘display none’ for SEO purposes?

I’ve changed the margin-bottom under #branding img in the past, but that affected my header image as well, creating a space between the header image and the menu. That’s why on my first post, I wrote that I just want the change to affect my logo image, and I have some resistance to change the #branding img and make a global change.

I hope what I said makes sense. I’m a newbie.

Okay, I found a way to resolve my issue.
Here is what I did:
Replaced “” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?>” with ““><img src=https://bodyatease.com/wp-content/uploads/2013/04/logo.png>” between <span> </span> in header.css.

The way I had it before was (based on other post):

<<?php echo $heading_tag; ?> id=”site-title”>
<span>
” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?>
</span>
</<?php echo $heading_tag; ?>>
<div id=”site-description”><?php bloginfo( ‘description’ ); ?></div>
“><img src=https://bodyatease.com/wp-content/uploads/2013/04/logo.png>
<?php

If anyone see a problem on what I did, please let me know.
It would be nice to have a feedback from an experienced person.

With your new markup, you lose H1 on home page for no reason.

And just to be clear, the CSS I posted above is for your old markup, the one presented when I viewed the page.

I didn’t lose the h1. It was still there with an image but no text.

I removed the cache on the html code so it’s easier to read and troubleshoot. Sorry about the compression.

I tried your solution and I was right about the #branding img. It is global and also affects the header image creating an space between it and the menu. Not a good thing.

I’m still trying to find a solution to this. I appreciate any help.

Okay. I was able to position the logo exactly where I wanted without losing the h1 tag, site title and site description in the html code.

I changed the header.php back to original state. Thus, no changes on this file.

Edited style.css:

#site-title {
background: url(“https://bodyatease.com/wp-content/uploads/2013/04/logo.png&#8221;) no-repeat transparent;
height: 80px;
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 18px 0;
width: 700px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
display: none;
}
#site-description {
clear: right;
float: right;
font-style: italic;
margin: 15px 0 18px 0;
width: 220px;
display: none;
}

/* This is the custom header image */
#branding img {
border-top: 0px solid #000;
border-bottom: 0px solid #000;
display: block;
float: left;
}

I like this solution because I only had to change the style.css file. It’s close to the original file with an addition of a few lines.

The only thing I missed from my previous solution is that the logo does not link to the home page. I think I can live with that.