Twenty Twelve: submenu hidden under slideshow block

[robertghetau]

This is a replica of this issue: ​https://github.com/Automattic/wp-calypso/issues/63939

Steps to replicate:

1. Activate the theme Twenty Twelve
2. Add 3 elements to the same submenu on the site
3. Add a slideshow at the start of a page

[sabernhardt]

I wanted to say that this should be solved in Jetpack, not the theme. However, the submenus only have a z-index of 1, so any content element with a positive z-index could cover the submenu.

@media screen and (min-width: 600px) {
	.main-navigation li ul {
		z-index: 1;
	}
}

Trac ticket: https://core.trac.wordpress.org/ticket/55892

[karmatosed]

This looks like it needs a refresh based on tests. Let's see about getting that.

[poena]

The test errors shown on GitHub does not seem to be related to the PR, can the tests be restarted?
(I do not have access to doing this).

Or are you referring to test results that are not listed here?

[karmatosed]

@poena I just re-ran tests and looks like it was just a matter of them being stuck which is exciting to find out. If you are happy I will absolutely see about moving this to commit now.

[poena]

I have not tested the PR with Jetpack or other "overlays", I am not sure that changing the z-index from 1 to 2 is enough.
I am still thinking about the easiest way to test it.

[karmatosed]

Ok in that case, happy to assign to you whilst you do that @poena.

[poena]

Test results

• JetPack slideshow has z-index 1, so using 2 in the theme would solve this problem.
• Jetpack Image compare has z-index 5, so using 2 in the theme would not solve this.
• Jetpack Story has z-index 1.
• WooCommerce sale and zoom icons which sits over the product image, has z-index 9.
• Popup Maker -no issues found with or without the PR.

What does other menus use?

• The navigation block uses z-index: 2.
• Twenty Sixteen z-index: 99999
• Twenty Nineteen z-index: 99999
• GeneratePress z-index: 99999
• Kadence z-index: 1000

My recommendation would be to use 9999.

---

The navigation block is also broken in this theme, I will first check if there is an issue open for this.

@narenin there is a recommendation on the track ticket to move this PR to use 99999 index, could you iterate?

@narenin there is a recommendation on the track ticket to move this PR to use 99999 index, could you iterate?

@karmatosed Sure will do that.

Thank you @narenin.

@karmatosed I have done the same, could you please take a look.

[karmatosed]

Thank you @narenin I am now going to test this.

[karmatosed]

In 58776:

Twenty Twelve: Fixes submenu hiding under slideshow block.

Whilst initially this could be thought to be solved in Jetpack due to submenus only having a z-index of 1 a fix is desirable. This brings in the suggested value.

Props robertghetau, SergeyBiryukov, sabernhardt, poena, narenin.
Fixes #55892.