Menu on tablet landscape modus – problem

Hi, the simplest solution is most likely just copying over how the menu works in portrait view to display in landscape. Try the following CSS in your Additional CSS for the theme

@media only screen and (max-width: 1200px) {
	/**
	 * Site Header
	 */

	.site-header {
		min-height: 0 !important;
	}

	.site-header,
	.is-singular .site .site-header,
	.admin-bar .site-header,
	.admin-bar.is-singular .site-header {
		display: block;
		padding: 2rem 2rem 0;
		position: relative;
		top: 0;
		width: 100%;
	}

	.site-header,
	.is-scrolled .site-header,
	.blog .site-header,
	.home .site-header {
		background-color: #292c2f;
	}

	.site-branding {
		display: block;
		float: none;
		padding-bottom: 2rem;
		width: 75%;
	}

	.is-singular:not(.home) .site-header > .site-branding {
		display: block;
	}

	.site-branding .custom-logo-link img {
		max-width: 250px;
	}

 	/**
	 * Menu
	 */
	#site-navigation {
		display: block;
		float: none;
		text-align: left;
		width: 100%;
	}

	.menu-toggle {
		background-color: rgba(0,0,0,0.1);
		border: 1px solid rgba(255,255,255,0.2);
		display: block;
		font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;
		font-size: 1.4rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		padding: 1em 1.5em;
		position: absolute;
		right: 2rem;
		text-transform: uppercase;
		top: 1rem;
	}

	.menu-toggle:before {
		content: "\f419";
		font-size: 85%;
		margin: 0 6px 0 0;
		position: relative;
		top: 1px;
	}

	.open .menu-toggle:before {
		content: "\f406";
	}

	#site-navigation > div {
		display: none;
	}

	#site-navigation.open > div {
		display: block;
	}

	#site-navigation ul li {
		border-top: 1px solid #363b40;
		display: block;
		margin: 0;
		padding: 0;
	}

	#site-navigation ul a {
		color: #8c97a2;
		display: block;
		padding: 1em 0;
	}

	#site-navigation ul ul {
		background: transparent;
		line-height: 1.6;
		margin: 0 0 0 2rem !important;
		padding: 0;
		position: static;
		width: auto;
	}

	#site-navigation ul ul:before {
		display: none;
	}

	#site-navigation ul ul li {
		border: 0;
	}

	#site-navigation ul ul a {
		color: #616a74;
		padding: 1rem 0;
	}

	#site-navigation ul li:hover > ul,
	#site-navigation ul li.focus > ul,
	#site-navigation ul ul li:hover > ul,
	#site-navigation ul ul li.focus > ul {
		left: 0;
		margin: 0;
	}

	#site-navigation ul ul ul {
		padding-left: 0;
	}
}

Hi there,

Can you give a bit more detail on what exactly is going wrong?

What size is your tablet, and what’s the screen width if it’s in landscape mode? Are you seeing the regular desktop menu or the mobile menu that’s hidden behind a button? What exactly happens when you try to tap a submenu item?

The problem occurs on an iPad and on an Android tablet in landscape modus. It uses the normal menu (not the mobile). When we try to reach the submenu’s it allready opens the main menu. I guess it is easily reproduced on a tablet. Here’s a link to the problem on our site: https://youtu.be/vimtgzJ_JYA

I do not see this on a tablet – I see the mobile menu regardless of orientation. That is why I asked for the size of your device, not the type. If you have a bigger model tablet, the site might be behaving as if it’s on a desktop screen instead in landscape mode, and the fact that you see the normal menu confirms that.

Can you please confirm the screen size of the device you’re using?

Okay, a colleague who has a bigger tablet was able to test this for me, and they’re able to reach the submenus on your site just fine.

Unlike what you show in your video, if they tap the menu item once it simply opens the submenu, and only with a double-tap does the top page load. So it looks like this might be specific to your browser.

Based on your video, you’re using Safari, and that is what my colleague used to test as well. Are you using any add-ons in Safari? Please try disabling those and check if that makes any difference.

Also check the accessibility options on your iPad:

https://support.apple.com/en-gb/HT205269

A setting there could be causing your device to respond to touches differently than expected.

We’ve tried it today on a few Ipad’s (normal size, no mini’s) and on an Android device, but the behavior is the same. The iPad on the video is an iPad air Gen 1, 9.7-inch retina screen. The Ipad’s don’t have any special settings regarding the accessibility options.

Is there a way to force the theme to use the mobile menu on tablets? That would be fine for us (also on tablets in landscape modus).

Thanx for your answers!

@kveerman please try the CSS code I mentioned earlier in my reply on this thread. I think it should handle the issue you’re having. You can add it into Appearance->Customize->Additional CSS

Are you by any chance forcing the browser to load the desktop site? If you open the browser settings while viewing the page there should be an option to force the desktop view.

If I do that, I’m able to replicate what you’re seeing, but not if I just load the page normally.

And do you also see the same problem if you visit https://dayd2demo.wordpress.com/?

@jarretc’s CSS code above should force the mobile menu, but I’d also like to make sure this isn’t a bug with the theme.

When I open the demo site it also uses the ‘desktop-menu’ and the problem is the same. I don’t force the browser to open the desktop site, it is no problem in portrait modus (mobile menu). We’ve tried it on different iPad’s and the behaviour is the same. Have you tried reproducing it on an ipad Air?

I don’t have an iPad Air, but I did check it on Browserstack, and a colleague who has one tested it on their iPad, and neither of us can replicate what’s happening for you.

Have you tried adding the CSS code above to force the mobile menu instead?

The above CSS code works fine, but.. The menu appears full screen on the tablet when you access it. With all the items/subitems it’s not a nice looking menu on the tablet in landscape modus.

I’ve tried this website https://wheretoflynext.com/ on a Android tablet and an Ipad. The behavior of the menu is a little better on android, when I hold the menu it is possible to open the submenu. It doesn’t work all the time, sometimes it the menuitem opens when we hold it (instead of opening the submenu’s).

Hi there. Sorry for the delay.

So you’re also seeing this on https://wheretoflynext.com/, which is on WordPress.com?

On that site I’m able to replicate the behaviour using responsive mode in my browser, so it might indeed be a problem with the theme. I’ve reported the issue to our developers along with the steps how I was able to replicate it, so hopefully they’ll be able to replicate it themselves and fix this. I’m not able to give you a timeline on how quickly that might be, though.