I just set it up per the instructions from the URL you listed.
Try this in style.css of your child theme, put it in just below @import line.
#masthead hgroup { position: relative; }
#masthead hgroup:before {
content: url("http://dummyimage.com/72x72/ff0000/ffffff&text=+0x26");
display: block;
width: 72px;
height: 72px;
position: absolute;
}
.site-title, .site-description { padding-left: 96px; }
Change the url to your own image, must be 72px square to look good.
Also this theme is responsive, some adjustments could be done further to fine tune it in certain screenwidths.
Perfect, thank you so much!
This code is better.
Logo is clickable as it should, and size is adjusted for small screen too. Code must use in child theme stylesheet or in Custom CSS plugin.
/* ===== begin logo ===== */
.site-header h1 a:before {
content: "";
display: block; width: 48px; height: 48px;
margin: 0 auto 12px;
background-image: url("http://dummyimage.com/72x72/ff0000/ffffff.png");
background-size: cover;
}
.site-header h1 { margin-bottom: 0; }
@media screen and (min-width: 600px) {
.site-header h1 a:before {
width: 72px; height: 72px;
position: absolute; top: 0; left: -96px;
}
.site-title, .site-description { position: relative; margin-left: 96px; }
}
/* ===== end logo ===== */
Is it possible to alter this, so that the logo links to an external site and the header text links to the internal homepage?
http://www.danielrandles.com
Hi Daniel, It’s not possible to make a different link using that CSS. Also it’s not a good practice to link logo or Site Title to anywhere else except Front home page.
