Adding logo to header, twentytwelve theme

melissarose
(@melissarose)

12 years, 3 months ago

I am trying to add a logo to my header instead of the header text. I added the following to my child theme:

img.header-image {
border-radius:0;
box-shadow:0 0 0 rgba(0,0,0,0);
position:absolute;
top:65px;
}
.site-header {
padding-top:2rem;
}

.site-header hgroup { display: none; }
.site-logo { max-width: 100%; height:auto; }

Which puts the header-bar picture at the top. The problem with this is that it goes on top of the header text, and depending on size will also cover part of my navigation bar, and if I take the header text out the location of my navigation bar changes by moving to the top of the page, while still being obscured by the logo pic.

I’m a bit new to WordPress and CSS so I’m not clear on what parameters need to be changed for this not to happen. The ideal final result would be a logo at the top left where the current header text is, and the navigation bar in the same place.

The site is http://www.melissarosenberger.com

Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

annaharper
(@annaharper)

11 years, 7 months ago
I am having the same problem. Please help!

I am using Jetpack Custom CSS, no need for a child theme. And I am self hosting my site.

When you make the site window smaller it overlaps the header text.

I would like to Center the logo on the very top to avoid this, so that it moves with the header instead of overlapping it. The issue is that the header changes from left to center as you downscale the browser window.

Here is my code:
```
img.header-image {
border-radius:0;
box-shadow:0 0 0 rgba(0,0,0,0);
position:absolute;
top:80px;
}
.site-header {
padding-top:3rem;
}

.site-title {
text-align:center;
}

.site-logo { max-width: 100%; height:auto; }
```
The site is:
I took the code off, until this issue is answered though. I don’t want my site to look bad from my visitors. You can see screen shots of the site with different widths here:

https://drive.google.com/file/d/0B5FBtSZSuLQXNGtEdVZFa2drekU/view?usp=sharing
href=”http://www.annaharper.com”>https://drive.google.com/file/d/0B5FBtSZSuLQXZ0xSOTV6QTBXQ0U/view?usp=sharing
https://drive.google.com/file/d/0B5FBtSZSuLQXcmxWV1UyLUtCTWs/view?usp=sharing
annaharper
(@annaharper)

11 years, 7 months ago
I figured some of it out on my own. But now I can’t get the logo back up the to top.

Site is active with code:
```
.header-image {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

img.header-image {
	border-radius: 0;
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

.site-header h1, .site-header h2 {
	font-size: ;
	text-align: center;
}

.site-title {
	text-align: center;
}

.site-logo {
	max-width: 100%;
	height: auto;
}
```
Peter Lawrenson
(@lorro)

11 years, 7 months ago
To move the logo I think you would have recode your theme’s header.php. PHP skills would be needed.

But you can put a non-clickable image at the top left with this css:
```
hgroup {background-image:url("http://annaharper.com/wp-content/uploads/2014/11/webLogo2.jpg"); background-repeat:no-repeat}
```
and hide the current logo:
```
.header-image {display:none}
```
annaharper
(@annaharper)

11 years, 7 months ago

Hi lorro,
Thank you for your help. I will give it a try. 😉

If having it on the left means it will overlap as the theme sizes down when on a mobile device, I don’t want that.

I may end up putting the logo in the nav bar later. If I can’t get it centered on top.

Kind Regards,
Anna

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding logo to header, twentytwelve theme’ is closed to new replies.

Adding logo to header, twentytwelve theme

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics