Different Headers for Different Screen Sizes Twenty Thirteen

Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes.

Hey richardbkk,

After creating a child theme for your site add this on your child theme style.css

@media (max-width: 643px) {
.site-header .home-link {
	color: #141412;
	display: block;
	margin: 0 auto;
	max-width: 1080px;
	min-height: 50px;
	padding: 0 20px;
	text-decoration: none;
	width: 100%;
	}
}

Happy editing ??

Botanet,

I am having the same issue as the OP and applied your media queries code to my child theme’s style.css. But it appears that all it does is change the height of the header image on a mobile browser. It doesn’t resize the actual image itself.

The OP’s site header (linked above) resizes according to browser width. Can you please tell us how you did it, OP?

It didn’t look like I hoped on mobiles. If you are happy for header to resize you can use these:

https://www.findurlaptop.com/tech/2013/08/04/customize-header-of-twenty-thirteen-theme-in-wordpress/
https://www.findurlaptop.com/tech/2013/08/23/responsive-header-background-wordpress-twenty-thirteen/

However, I am going to manually resize the headers and reload them for the various screen sizes as that would give the tailored solution I want, so that the text in the header is bigger on mobile screen sizes as just a resized header is not giving a satisfactory solution for smaller screen sizes.

tgnp,

The above coding is for “richardbkk” to make his header responsive on the mobile.

To get your issue sorted you need to create your own thread.

Thanks and happy editing ??

Hi Botanet,

I wanted different headers for different screen sizes not a resposnive header. That is a different question. Please read my original question again. Thanks.

Hi richardbkk,

You can do different headers by using media queries.

Your header for mobile

@media only screen and (min-width : 320px) and (max-width : 480px) {
 /* style here */
}

Your header for tablet

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
/* style here */
}

thanks

Thanks Botanet!

NOTE – The below changes should be made in a Child Theme – do not modify theme files directly.

This is a bit of a complicated fix, but it does actually fix this issue and the image resizes dynamically based on the screen size.

1) Create a clear PNG that is 1600px by230px
2) Upload this image somewhere accessible
3) in the header.php file insert an image call like this:

<header id="masthead" class="site-header" role="banner">
		<img src="URL_OF_IMAGE.png" class="clearfix">
				<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

4)in custom-header.php change the background-size to 100%

.site-header {
			background: url(<?php header_image(); ?>) no-repeat scroll top;
			background-size: 100%;
		}

5) In style.css add a new line in 4.1 Site Header

.site-header .clearfix {
	width: 100%;
	}

Essentially what’s going on here is the clear image acts as a retainer for the space where the header image is.

This will not work for sites that have the tagline copy in use as it bumps all that down to the next line. In my case, I had this embedded in the header image and didn’t need the tagline.

@goeslikeschnel – any of these changes should be made in a child theme – do NOT modify theme files. Note added to your post above.

@goeslikeschnell, Thanks for taking the time to post that, but it’ll encourage people to edit the theme’s files and we (I assume you know) know what’ll happen when the theme updates.

Could you post a suggestion that involves a Child Theme?

@goeslikeschnell, your method does not seem to work. I did as you suggested, but the mobile theme displays only the central part of the original header image.

A simple edition in header.php in the child theme works. Add the “100%”command twice for the background.

<header id="masthead" class="site-header" role="banner" style="background-size:100% 100%;>

The second time you say 100%, you are referring to the mobile screens. So if you want the header image to appear smaller there,you could decrease the percentage, this will however result in space between the image and the nav menu. The best thing in such case is to edit the header image altogether.

Regards,
soasmw