This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Hero-image covers menu in new WordPress Twenty-Twenty-One Layout and images problem

5 years ago · Last reply by Alex S 5 years ago

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

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Alex S Staff 5 years, 16 days ago

    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

  2. yomo_1234 5 years, 14 days ago

    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

  3. Alex S Staff 5 years, 13 days ago

    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

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread