By default, if you replace the text header in Swank with an image, the image will align left.
Today, I am going to show you how to center the image header.
You’ve replaced the theme’s image logo, and want to make it centered?
Open up your stylesheet, and look for this:
/* Logo, hide text */
.header-image .site-header .wrap {
background: url(images/regularlogo.png) no-repeat;
margin: 0 auto;
padding: 0;
text-align: center;
}
Replace that with:
/* Logo, hide text */
.header-image .site-header .wrap {
background: url(images/regularlogo.png) no-repeat center;
margin: 0 auto;
padding: 0;
}
Note: You will also need to make a similar adjustment for the retina logo in the Media Queries.
/*
Media Queries
—————————————————————————————————- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.header-image .site-header .wrap {
background: url(images/retinalogo.jpg) no-repeat left;
background-size: 320px 164px;
margin: 0 auto !important;
}
}
Change the left (in red above) to center.
Leave a Reply