Show Menu Toggle on iPhone X?

Hi there,

Are you able to provide a screen shot of the problem?

Here's a link to my screenshot using the latest Firefox responsive design mode. Thanks!

Don't really like adding device specific hacks as they can get a bit out of hand, but you can give this CSS a shot:

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation : landscape) { 
	.main-navigation .menu-toggle,
	.main-navigation .mobile-bar-items,
	.sidebar-nav-mobile:not(#sticky-placeholder) {
		display: block;
	}

	.main-navigation ul,
	.gen-sidebar-nav {
		display: none;
	}

	[class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}
}

This didn't change anything. Is it for landscape? Because portrait is showing the hamburger menu.

I just edited the code above to add the landscape orientation.

Truly the iPhone X media query and view port is a beast of its own... this doesn't work on my site, but thanks for trying, I appreciate it!

I don't have a real device to test it on, but if i load it directly into the style sheet in FF, it works (with or without the landscape orientation).

It probably doesn't work because of my order of media queries. I've tried it in various locations :(

Could well be - should we just leave it as is? Or do you want me to investigate further?

Hi David -- since the iPhone X wants to use my desktop version pretty much, I just reduced my logo size and primary nav font size so everything fits now at least. I'll try your css on other projects though! Thank you very much :)

Thats great :)