You would create a child theme and then edit a copy of your header.php file to add the HTML for the image.
Create an child theme of the twenty twelve theme, upload an logo image or header image and use float property of css to make it to the right side.
Thread Starter
Anonymous User 14071953
(@anonymized-14071953)
I’ve been trying to avoid the child theme, because I’m not very tech savvy. So far, everything is on a “twenty twelve” theme. Is there a way I can simply edit the header to allow for a logo?
As you may have discovered, when you add a header image, it stretches across the entire width of the content by default, but you can use CSS to shrink it down to the size you want, then position it in the upper right corner.
Since you don’t want to create a child theme, you’ll have to use a CSS plugin like Jetpack or Custom CSS Manager (I would recommend Custom CSS Manager). Then, after you have your header image set, you can try adding these CSS rules:
.site-header {
position: relative;
}
#masthead > a {
position: absolute;
width: 250px;
right: 40px;
top: 10px;
}
The first rule, for .site-header, sets the positioning of any child elements relative to the boundaries of the header area. The second rule sets the size and position of the header image. The values that I’ve chosen are somewhat arbitrary, based on a test of my own site; you will have to adjust the values for width, which sets the width of the image, right which is how much space there is between the image and the right edge of the header area, and top, which is how much space there is between the top of the image and the top of the header area. If you post a link to your site, I can offer more precise values.
The only other thing you’ll need to do is to add media queries to your CSS that adjust the position of the image on narrower viewport sizes, like tablets and smart phones. If you make your browser narrower, like the same width of a smart phone, you’ll see what I mean.
Thread Starter
Anonymous User 14071953
(@anonymized-14071953)
Thank you so very much for this advice. This is the link to my site. http://assetleader.ca. As you can see, it’s very bland. Hence why the logo is so important.
Can you try adding the image that you want to use as a logo as the header?
Thread Starter
Anonymous User 14071953
(@anonymized-14071953)
The image is currently up with the code that you provided, except that I changed right to left.
OK, try adding this additional rule to bring the menu down below the logo:
.main-navigation {
margin-top: 200px;
}
Thread Starter
Anonymous User 14071953
(@anonymized-14071953)
Perfect! Thank you very much.
Do you know if it’s possible to get rid of the outline?
Truly appreciate your advice with this.
Add this rule:
img.header-image {
box-shadow: none;
}
Thread Starter
Anonymous User 14071953
(@anonymized-14071953)
Perfect. Thank you very much.!
Hi,
I just wonder where can I make the picture to align left instead of right as it is right now on my website?
URL
The css looks like this:
site-header {
position: relative;
}
#masthead > a {
position: absolute;
width: 200px;
right: 0px;
top: -10px;
}
img.header-image {
box-shadow: none;
}
.main-navigation {
margin-top: 50px;
}
@rinormaz, you’re referring to the logo in the header? Change this rule:
#masthead > a {
position: absolute;
width: 200px;
right: 60px;
top: -10px;
}
to this:
#masthead > a {
position: absolute;
width: 200px;
left: 60px;
top: -10px;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
