Responsive issues with custom header graphic in 2013
-
I want to include a banner-like custom header in a 2013 WordPress site, but I want to control what shows on iPad and iPhone. Is there any way to upload custom headers that will display only when the site is served on these devices?
-
It’s something you might be able to do with custom CSS but it would be a bit tricky and quite manual, i.e. you’d need to add custom CSS rules for every separate page or type of page where you want to include a custom header. Or were you thinking of one header for all pages in normal browsers and then a different header image for all pages in the whole site for iPad/iPhone?
-
-
Just to note, custom CSS is part of a paid upgrade called Custom Design. You can find out more about it at https://store.wordpress.com/premium-upgrades/custom-design/
Here is a rule that will work to change the header image in the Twenty Thirteen theme on devices that are 1024px or smaller:
@media only screen and (max-device-width: 1024px) { .site-header { background: url(http://s.w.org/about/images/logo-comparison.png) no-repeat; } }You would want to change out the url() value to an image you have uploaded to your media library.
-
First of all, I’m nominating you for sainthood for offering to help me with this ¡-)
But I can’t get the iPhone to pull in the smaller custom header graphic (a 320px .png file). Here’s what I added to the .css of my childtheme. I also tried plugging in the exact css you gave me, too.@media only screen
and (max-width: 359px) {
.site-header {background: url(http://ruthmartinhomecare.com/wp-content/uploads/2014/02/phone-logo.png) no-repeat;
background-size: 320px auto;
}
} -
I don’t think just creating a custom class is going to work here. I am going to go through a 3-part tutorial (part 3 looks like it’s what I’m looking for ) that addresses working with the header.php. If it works, I’ll give it the thumbs up here.
http://wpti.ps/functions/mobile-optimized-twenty-thirteen-header-image/ -
@ronnisweet
Know that this WordPress.COM support forum is only for those who have:
registered WordPress.COM blog;
and have paid for an annually renewable custom design upgrade for the blog WordPress.COM blog in question.WordPress.COM and WordPress.ORG are completely separate, have different log-ins and run different versions of themes with same names. http://support.wordpress.com/com-vs-org/
If you are referring to a WordPress.ORG install and you don’t have a username account at WordPress.ORG click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there and receive advice from WordPress.ORG bloggers.
-
I did test the CSS I posted before, but I tested it on an iPad. It should work just as well on smaller screens too though.
I tried the example you posted, and that worked for me as well. Maybe you aren’t adding the CSS the right way. Try using the Custom CSS module from the Jetpack plugin instead of a child theme:
http://jetpack.me/That tutorial looks intense :) and I would love to hear back if you decide to take that route and it works out.
Your note about using a child theme was the tip-off that your blog is using WordPress but isn’t hosted here at WordPress.com. Because of that, the best place to ask future questions about the Twenty Thirteen theme in your case is at http://wordpress.org/support/theme/twentythirteen
-
Thank you and sorry for posting in the wrong place. I just came in from a search engine and didn’t pay attention to where I was. My browser must have remembered my wordpress.com and let me post here.
-
No problem! I try to give a little help if I can in cases like this and then try to direct to the best place to post future questions after that.
Also, it was a good CSS question, and I like those. :)
- The topic ‘Responsive issues with custom header graphic in 2013’ is closed to new replies.
WordPress.com Forums 
