Apply z-index on main navigation

This topic has 13 replies, 6 voices, and was last updated 2 years, 9 months ago by Fernando.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
November 22, 2022 at 12:50 pm #2427887

Albert

Hello,

how can i apply a z-index in the main navigation menu in the desktop version?

My website is banyeresdelpenedes.cat

November 22, 2022 at 4:43 pm #2428081
Leo
Staff
Customer Support
Hi Albert,

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

If so try this CSS:
```
.site-header {
    z-index: 99;
}
```
November 23, 2022 at 5:57 am #2428953

Alg

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?

November 23, 2022 at 11:19 am #2429790
Ying
Staff
Customer Support
Hi Alg,

Try adding this CSS:
```
nav#site-navigation {
    position: relative;
}
```
November 23, 2022 at 11:36 am #2429836

Alg

Perfect, that has sorted it thank you!

November 23, 2022 at 12:52 pm #2429928

Ying
Staff
Customer Support

No problem 🙂

November 24, 2022 at 4:38 am #2430836

Albert

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.

November 24, 2022 at 5:28 am #2430918
David
Staff
Customer Support
Hi there,

try this CSS:
```
.header-wrap {
    z-index: 1000;
}
```
November 24, 2022 at 5:29 am #2430920

Albert

Now yes, thank you very much David

November 24, 2022 at 5:40 am #2430941

David
Staff
Customer Support

You’re welcome

December 30, 2022 at 9:57 am #2478221

Alg

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!

December 30, 2022 at 12:07 pm #2478309

Ying
Staff
Customer Support

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?

December 31, 2022 at 5:01 am #2478730

Alg

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?

January 1, 2023 at 6:10 pm #2480079

Fernando
Customer Support

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?
Author

Posts