Responsive Header/Banner
URL to the page in question:
www.justiceunlocked.com
-
Bill,
My web developer/graphic designer is asking a question about the responsiveness setting. She’s been playing with different banners and logos, and we’ve settled on one we like. But changing over to mobile/tablet it’s not exactly re-sizing just the way she’d like it.
Essentially, her question was – is there a way to alter the theme or any settings so that below a certain width it uses one logo/banner file, and above a certain with, it uses a different file?
Good Morning Jamie,
It is possible to do that. Here’s how:
- Go to the Media Section in your WordPress dashboard and select Add New. Upload the image you’d like to use. Once the upload is complete, click on the edit link. Look on the right hand side of the screen that opens up for the File URL. We’ll need that in just a minute.
- Go to the Appearance section in your WordPress dashboard and click on Customize.
- Look down for the advanced section and click on it. Then choose Custom CSS.
- In the box there, add this:
@media only screen and (max-width: 767px) {
.image-logo img {
display: none;
}
.image-logo a {
display: block;
width: 100%;
text-align: center;
}
.image-logo a:before {
content: url(https://yoursite.com/image.png);
}
}
- Replace the http://yoursite.com/image.png with the URL to the image you uploaded earlier.
- Save your changes.
That should give you a different logo when the browser window is 767 pixels wide or smaller. Feel free to tweak that size to achieve the effect you’re looking for. You can also duplicate it to have yet other logos when other sized screens are being used too.
Let me know if you have any trouble and have a great week,
Bill
- The topic ‘Responsive Header/Banner’ is closed to new replies.