Breadcrumb path overlap menu in header

[lvandeemter]

Good morning,
Working in PRO - headers.
When I put the breadcrum path undernead the menu - where I would like it - it overlaps the menu and the first sub-page is not accessible - it is hidden behind the breadcrumb. PRODUCTOVERZICHT
When I put the breadcrumb-bar on top - this issue is gone. (but that is not what I whant )

Can you please advice how to fix this?

[christian]

Hey @lvandeemter,

The z-index of the bar you placed the breadcrumbs is the same as the first bar where your menu is. You should set the first bar’s z-index higher. I’ve set it to 9995 and the issue was fixed.

To understand how z-index stacking works, please check out the resources below:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
• https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
• https://medium.freecodecamp.org/z-index-explained-how-to-stack-elements-using-css-7c5aa0f179b3

Hope that helps.

[lvandeemter]

Thank you so much for you quick help!

[christian]

You’re welcome. Glad we could help.