If your theme support custom headers, you’ll be able to specify a custom header for your site, that will appear in Jetpack’s Mobile Theme, by going to Appearance > Customize in your dashboard.
If your theme doesn’t support custom headers, CSS is indeed the way to go. If the quality doesn’t seem good enough, I’d recommend using a larger image.
Looking at your site, it looks like you’ve managed to insert the header image already, but you’ve hidden it with the following CSS:
.mobile-theme #branding {
text-indent: -9999px;
background-color: #000;
}
Removing that CSS should help.
You can learn more about how to customize the mobile theme here:
https://jetpack.com/2013/06/27/customize-mobile-theme/
Thanks Jeremy
I was able to set my theme up to accept custom headers, but wanted to removed the text on the mobile header – the only way I knew how was to use text-ident but this of course hides the image too.
I was also trying to figure out how to hide the header image from the desktop site but keep it on the mobile site.
wanted to removed the text on the mobile header
That should be an option under Appearance > Customize in your dashboard, if your theme supports it. If it doesn’t, you’ll need to add the option in your theme’s functions.php file, where the custom header option is added:
https://codex.wordpress.org/Custom_Headers
You’ll want to include the header-text option.
I was also trying to figure out how to hide the header image from the desktop site but keep it on the mobile site.
You should be able to edit your theme’s header.php file to remove the header image call.
I decided to make the logo part of the menu background-image and remove the header altogether and I prefer that as it uses minimal space.
The image quality is really bad on mobiles, would you agree?
It feels alright to me, although it’s really squeezed in that header. Here is what I see on an Android device:
http://i.wpne.ws/gl39
I thought a header would take up too much space, especially on a mobile device causing a user to scroll down to see any content on each page – what do you think would be the best way to incorporate the logo?
I’m personally not disturbed by the full header. I think it’s a good introduction for readers discovering your site through search engines for example. The site name and the logo are important parts of your site identity.
That said, it’s really up to you I think.
I see what you mean, I may work on a small header so I can take advantage of SEO – for now I saved the logo as an SVG making it much sharper.
