Menu SubItems covered by Parent Menu Items

Hey @ricknu2208, I understand that you tried using z-index to solve the issue but it still looks like that’s the core issue here.
There could be other CSS styles that are overriding your styles like maybe from WooCommerce or some other third-party plugin ? Maybe try position:relative as well with the navigation menu so that it just stacks on top of the content.

Hope it helps!

Hey @ricknu2208 ,

Could you try adding the following Custom CSS:

z-index: 0 !important;

For the element of “Contact Us”

Hello @ricknu2208,

I tried to find why this is happening, This is probably happening because the menu should have z-index set to revert but the elementor is setting it to 0 and You have probably added the custom CSS to make it z-index: 9999 !important.

To solve this you can replace your custom CSS with below to solve the issue.

.elementor-nav-menu--main li.menu-item {
    z-index: revert !important;
}

For the issue of the search icon on this page https://freshhope.us/product-category/short-term-courses/ . The problem is the search icon has z-index: 9 and the header has z-index: 8 .

To solve this you can place this CSS to make the header come on top of everything.

.elementor-sticky--active {
    z-index: 99 !important;
}

Hope this helps!