Home page menu not visible with Safari on iPad

Hi @brianmcculloch2014, Would you be able to show us a page with the issue?

Thanks Andrew. The site is mcculloch.org.nz and I have uploaded screenshots at mcculloch.org.nz/ipad/.

Thanks for the images, that’s really helpful.
It looks like the easiest thing to do here would be to reduce the height of the image that appears above your navigation. Would you be okay with that? Or did you have another solution in mind?

Thanks Andrew. The image I was using had been cropped to the recommended 2000×1200. I have also tried it at 2000×1100 but it is the same outcome. Is that what you mean by reducing the height?

Ah I was thinking more of a code solution. Twenty Seventeen has some code that sets the image to be 100% of the vertical space of the browser before you’ve scrolled. This is set for newer browsers, but it also has code that sets the image to be 1200px tall for old browsers.

The values are currently set as:

height: 1200px; (1200 pixels: This is for old browsers)
height: 100vh; (100% of the vertical space: This is for new browsers)

So we need to change those values. I’m going to reduce those values by 20% from personal preference, but you’ll have a better idea of how short you want the image.

If you’re not using a Child Theme, and if the theme doesn’t have a section for CSS modifications then do the following:

1. Install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin
2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
3. (put this code in)

   
   @media screen and (min-width: 48em) {
       	.twentyseventeen-front-page.has-header-image .custom-header-media,
   	.twentyseventeen-front-page.has-header-video .custom-header-media,
   	.home.blog.has-header-image .custom-header-media,
   	.home.blog.has-header-video .custom-header-media {
   		height: 1000px;
   		height: 80vh;
   	}
   }
   

4. Save

Alternatively use your Child Theme style.css file to hold your CSS modifications

• This reply was modified 7 years, 10 months ago by Andrew Nevins.

Thanks Andrew. That seems to have fixed it perfectly.

I just pasted your code into the “Additional CSS” area in the theme customizer. “95vh” was enough to get the menu into view, and I didn’t seem to need to change the px height to get it to work so I left that line out.

Interestingly this same effect occurs on the WordPress Twenty Seventeen demo site, Needle & Hook. I checked it out when I got the same issue as Brian. So maybe it’s something to look at, even though Brian’s issue was resolved.

And of course by changing to say 95vh you might solve the problem for the iPad issue, but you’re bringing the top of the top panel into view on other browsers, somewhat spoiling the full-page presentation.

Andrew Nevins
Solution is the first half. Image will still be the full size. It becomes obvious if you change viewport so it would match the other pages.
My solution was to add a second CSS block.

.has-header-image .custom-header-media img {
	height: auto;
	min-height: 237px;
}

Register proper image size for Admin panel

function childtheme_custom_header_setup() {
	add_theme_support( 'custom-header', apply_filters( 'simpleseventeen_header_args', array(
		'height'                 => 237,
	) ) );
}
add_action( 'after_setup_theme', 'childtheme_custom_header_setup' );

Folks, I was wondering if someone could help me out with this same issue. I don’t know if its from inputting the css incorrectly from your posts or not? I don’t mind on my other pages that my header image isn’t fully displayed, unless there is a way to make that happen as well.

My main concern is my image on my main page. I just can’t get it to display within the browser nicely. I’d imagine its a parameter somewhere, as I spent hours changing my image to fit, and I realize I am completely off and need to make the change from the coding side.

Since this was posted as resolved, I didn’t know if I needed to open a new post or not for the same issue. thank you very much Dave

https://hgraceconfections.com is my site and here is my child theme style.css

here is my child style.css
/*
Theme Name: Twenty Seventeen Child Theme
Theme URI: https://hgraceconfections.com
Author: Dave Romesburg
Author URI: https://hgraceconfections.com
Template: twentyseventeen
Description: Child theme for Twenty Seventeen.
Version: 0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: twentyseventeen-child
*/
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
height: 1000px;
height: 80vh;
}
}
function childtheme_custom_header_setup() {
add_theme_support( ‘custom-header’, apply_filters( ‘simpleseventeen_header_args’, array(
‘height’ => 237,
) ) );
}
add_action( ‘after_setup_theme’, ‘childtheme_custom_header_setup’ );