Menu does not overlap content on mobile

  • Resolved zymotik

    (@zymotik)


    1 year, 7 months ago

    WordPress 6.2, Plugin: Twentig Version 1.5.5

    Website: Window Cleaner in Hall Green.

    To reproduce, use Chrome, open dev tools, toggle device toolbar (mobile view) and select iPhone 12 Pro. Open mobile menu and you will see the grey block is over the menu.

    I believe the issue is that the z-index on the menu is set at 2 and along with the overlap styles for the image overlap block.

    .primary-navigation-open .primary-navigation

    .wp-block-media-text.is-style-tw-overlap .wp-block-media-text__content

    I can fix it by setting .primary-navigation-open .primary-navigation to a z-index of 3 for example.

    Please note: I have temporarily fixed this with the following css…

    @media only screen and (min-width: 652px){
	// Fix for bug on overlap elements
	.primary-navigation-open .primary-navigation {
		z-index: 10;
	}
}
    • This topic was modified 1 year, 7 months ago by zymotik.
    • This topic was modified 1 year, 7 months ago by zymotik.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter zymotik

    (@zymotik)

    I’ve selected the option to stack media below on mobile and the problem has returned.

    Thread Starter zymotik

    (@zymotik)

    I fix with this, avoiding the code comments, as it affects the code:

    .primary-navigation-open .primary-navigation {
	  z-index: 3;
}
    Plugin Support Yann

    (@collet)

    Hi,

    Thanks for your feedback.

    This issue has been fixed in the new Twentig 1.6 release.

    Have a nice day,
    Yann

    Thread Starter zymotik

    (@zymotik)

    Thank you Yann

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Menu does not overlap content on mobile’ is closed to new replies.

Tags