Hi!
Hero Image is unfortunately covering the menu in mobile version of the site of new WordPress Twenty-Twenty One Layout =. I tried to set z-index to 100 or 999 with “!important” to several classes and ids (listed below) but nothing seems to work.
.primary-navigation-open .primary-navigation .primary-menu-container .navigation-top #primary-menu-list .menu-wrapper #site-navigation #nav_menu_instance
The second problem is that if I put a image inside Hero Image (I mean: not the background, but some custom img inside the paragraph) it takes the height and width of the whole Hero Image area (it’s streteched). I can add fixed height and width to the image, but then it doesn’t resize as it supposed to with reducing screen resolution.
Any advice would be appreciated :).
Thanks!
Y
Hi Yomo,
This can correct this by adding the following custom CSS to AppearanceCustomize, Additional CSS:
.primary-navigation-open .primary-navigation { z-index: 101; }Kind regards,
Alex
Hi Alex,
Unfortunately that also doesn’t work :(. Hero Image is still covering menu in mobile version in Twenty-Twenty-One Layout.
Is there any other idea that we could try?
Thanks,
Y
Hi,
That’s odd. The CSS I replied with is working for me. If you haven’t already, please try clearing your browser cache to see if that helps.
If it doesn’t, do you have a public URL where we can take a look at your site? This will allow me to inspect your markup and work out why the provided CSS isn’t working on your site.
Kind regards,
Alex