Hidden site title hides header image on mobile?

Did you make any CSS changes to the home-link?

No changes to the CSS. It’s a fresh WordPress install. I also verified it on another installation that I’ve been using for a long time with the title enabled.

The trick I’ve done for now is to have the title enabled but to hide it with CSS.

.site-title { display:none; }

Ah, OK, now I see it happening. I was using an older version of TwentyThirteen (1.1), and the header image didn’t disappear on a mobile viewport, but I upgraded to 1.3 and now it disappears.

The cause is this section of a media query:

/* Collapse oversized image and pulled images after iPad breakpoint. */
@media (max-width: 767px) {
   .site-header .home-link {
      min-height: 0;
   }
   .site-title {
      font-size: 36px;
      padding: 8px 0 10px;
   }
...
}

If there’s no site title, then setting the min-height of the header will completely collapse the DIV containing the header image since there are no elements inside of it. You can probably add a rule to set the min-height to some non-zero value, but setting site-title to display:none is probably a good work-around. Otherwise you’ll also have to set the background-size property of the site-header to eliminate any white space.

Thanks a lot for your help!

olalindberg, your question may have been resolved to a certain degree. CrouchingBruin mentioned that after your header appears on your mobile device, you will have a white space between the header and the menu bar. To resolve this, all you have to do after going to your style.css section and finding this code near the bottom half:

/* Collapse oversized image and pulled images after iPad breakpoint. */
@media (max-width: 767px) {
.site-header .home-link {
min-height: 0;

Enter any number in the (min-height: 0;) line, this will simply show a header, but with white space in between it and the menu bar, to fix this issue, all you have to do is simply add the two letters (px) after your number. For example, ( min-height: 110px; ). And there you go, no white space! So you don’t need to ‘set the background-size property of the site-header’ to eliminate that white space.
By the way you could start with a high number like 200 and go down in increments until you see a thin white space, and then you’ll know the next number would take all that white line away, I tried it that way, I went from 200 to 150 to 120, 115, 111 then 110. Simply add the px letters behind your number.

Thank you, wpsol! Your advice was spot on, and my issue is resolved.

.site-title { display:none; }

do you know where or how i add that to the css?

do i just paste it in?

thank you

it’s okay… found a solution..

??

sorry, i was mistake… still need a solution…

so where to i add the “.site-title { display:none; }”

also where is the style.css section?

thank you

@ss237, don’t edit the theme files directly. Instead, use the Custom CSS option of JetPack (if you already have it installed) or use a CSS plugin like Custom CSS Manager. You would just copy & paste the rule in there.

@crouchingbruin Thank you very much for your help ??

My header also disappeared in mobile devices when removing the site title in twentythirteen

However, though placing this code into my child-theme style.css file did enable the header to appear in my mobile devices, the tall white space between the header and the menu still exists. I did add the “px” after the size “210” as wpsol suggested. 210 is the exact size that I need the header to be.

/* Collapse oversized image and pulled images after iPad breakpoint. */
@media (max-width: 767px) {
.site-header .home-link {
min-height: 210px;
}
.site-title {
font-size: 36px;
padding: 8px 0 10px;
}
…
}

CrouchingBruin mentioned that it may also require the “background-size property to be modified. Does anyone know the code for the .css file for doing so? Will this complete the solution?

thank you kindly and also for the previous entries

@studios, can you please post a link to your site?

CrouchingBruin said – @studios, can you please post a link to your site?

blindliberal.com

OK, so you already have two media queries in place to change the width of the background image. All you need to do is change the height of the link at those same break points:

@media (max-width: 767px) {
   .site-header .home-link {
      min-height: 0;
      height: 100px;
   }
}
@media (max-width: 359px) {
   .site-header .home-link {
      height: 50px;
   }
}

You can play around with those height values to suit your preference.