Apply z-index on main navigation

Hi Albert,

Are you referring to both the header (logo) and navigation?

If so try this CSS:

.site-header {
    z-index: 99;
}

I was just about to post the same problem on my new site:
https://www.electric-outboard.co.uk

The sub-menus under Electric Outboards are hidden behind the images of the front page products and also behind the images if you clikc into an actual product as well:
https://www.electric-outboard.co.uk/product/haswing-armada-f-8hp-electric-outboard-250lbs-4320w-67cm-shaft/

I've added this CSS snippet but nothing has changed - any further thoughts or options at all?

Can the z -index of the products be reduced? The same with the images inside the product main pages?

Hi Alg,

Try adding this CSS:

nav#site-navigation {
    position: relative;
}

Perfect, that has sorted it thank you!

No problem :)

Hi, I've tried both codes and still have the same problem. To understand the problem, you can enter this link:
https://www.banyeresdelpenedes.cat/temes/cultura/

If you try to navigate through the last items in the first dropdown of the navigation menu (Themes) you will see the problem. When you hover over a submenu item that's over a GeneratePress block, the menu disappears and it's impossible to click on it.

Hi there,

try this CSS:

.header-wrap {
    z-index: 1000;
}

Now yes, thank you very much David

You're welcome

Hi,
This is bizarre but the problem has returned to my main page on desktop:
http://www.electric-outboard.co.uk

I have checked it in Edge, Chrome, Firefox and SlimJet.

I still have the following CSS in the menu:
.site-header {
z-index: 99;
}
and
nav#site-navigation {
position: relative;
}
and when the page is at the top the menu is hidden behind the products.
As soon as you scroll down then the menu will sit over the products perfectly fine?

Any ideas would be gratefully accepted!

Hi Alg,

1. You are using navigation as header option, so your site doesn't have a site-header.

2. I'm not seeing your 2nd CSS, how did you add the CSS?

Under Appearance, Customize, Additional CSS.
Looking further it is very odd as this only happens on the front page - if you go to page 2 or three of the products the menu works fine?

I also now notice that on the front page the section at the bottom to jump to pages 2 or 3 is layed out very oddly?

If you go to https://www.electric-outboard.co.uk/product-category/electric-outboards-home/page/2/ then the menu works fine even at the top and the page jump menu at the bottom is also laid out correctly?

Does that help narrow it down at all?

It seems to be because of your caching plugins or some other caching.

For instance, if you add /?nocache at the end of your URL, the issue disappears. Example: https://www.electric-outboard.co.uk/product-category/electric-outboards-home/?nocache

Can you check out your caching/optimization plugins and try disabling them?