Background / Foreground issues with navigation dropdown and popovers

[ruudvanbeek]

I have been searching the forum for a few hours now but can’t find some kind of solution.

As you can see most of the testmenu is hiding behind other design elements. This also happens in an existing website with popovers hiding partly behind a classic card element. The latest occured in the testsite after updating X from 5.1.1 to 5.2.5

Is there a way to correct this?

[Prasant]

Hello @ruudvanbeek,

Thanks for asking.

Can you please share website URL as on my local setup I am unable to replicate the same. In the mean time please:

1. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.
2. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

Thanks.

[ruudvanbeek]

Hello Prasant,

Thanks for your reply.

The link to one testsite is: http://www.teststore.cnectstore.com/blog/

All caches were already cleared, local (chrome) and W3TC is now completely off. We don’t use CDN’s.

[Joao]

Hi There,

You need to play with the z-index of your bars.

On your first bar, the z-index should be superior to 1.

Right now both sections have z-index 1

Click on the bar, and add: 2 to the z-index property of your first bar which has the elements laying below.

Hope it helps

[ruudvanbeek]

Hello Joao,

Thanks for pointing me in the right direction. I finally managed to get it working, I won’t mention how many hours it took me

This is where I finally got it working:

To get there I ultimately used a workaround; using the stylebox in cornerstone to get it there. I have been fighting many, many times to simply get the correct syntax in CSS to do this in a single line. I would expect something like:

#x-section-3 .x-section {
z-index: 2;
}

to work. I have tried dozens of combinations…

Any suggestions to the correct syntax?

[nabeel]

Hi again,

You can use this code:

#x-section-3 {
    z-index: 2 !important;
}

Hope this helps!

[ruudvanbeek]

Just tried, the code does NOT work… Any more thoughts?

[Joao]

Hi There,

From what I could see you could adjust all that inside the header builder.

Please provide your login credentials in a secure note so we can take a closer look in order to avoid you to spend many more hours .

Thanks

[ruudvanbeek]

Hello Joao,

I already have it working in cornerstone using the stylebox. I just keep wondering why I cannot get it to work as simple CSS code. The code Nabeel provided does not work unfortunately.

[Prasant]

Hello @ruudvanbeek,

Would you mind sharing login details in a secure note for us to take a closer look?

Thanks.