I can't figure out why the header is cutting off part of the page on an iPad

My site is http://www.seedtospoon.net and I’m having an issue with the header on an iPad. The header is cutting off part of the page. This isn’t happening on an iPhone or in any other browser I’ve tried.

I can only duplicate it on the iPad while viewing in landscape and have run out of ideas. Any help would be greatly appreciated!

Thanks!

Dale

Dear Dale,

I would like to apologize in advance for the inconvenience. But, I don’t think it is an issue with the theme; it’s designed that way. On tablet screen, the main header block uses absolute positioning which resulting its top edge touches the top of the screen and the header bar overlays it. This situation doesn’t meet your need. As the solution, you have to add the below CSS code into your site’s additional CSS option under Appearance > Customize > Additional CSS.


@media only screen and (max-width:1024px){
	
	.site-header,
	.site-header.fixed {
		position: relative !important;
	}
	
}

I hope this reply helps. Feel free to open a new topic if you need anything else.

Regards,
Kharis

Thank you, Kharis! I appreciate your quick response and it worked great!

Dale

You’re welcome and best wishes!

Regards,
Kharis