Header PRO: Bar 2 appears above Bar 1. Bar 1 drop-down menu items hidden behind Bar 2

[jvpa]

Hi, I have a header created with X PRO.

The header has 2 Bars.

Bar 1 has an inline menu, and when hovering the mouse over the items, it creates the drop-downs of sub-menu items.

Bar 2 has another inline menu, and Bar 2 appears underneath Bar 1 on the screen.

However, when I have both Bars displayed, the drop-down menu items from Bar 1 appears behind Bar 2, making some of them them unclickable.

Is it possible to “bring to front” Bar 1 and have its drop-down items appear in front of Bar 2?

Thanks

[rahul]

Hey @jvpa,

By adding z-index property to sub-menu class, you can show drop down menu items in front of bar-2.

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

[jvpa]

Thank you - this solved my issue.

For anyone else with the same problem, here’s what I did to fix it.

Launched the HEADERS editor, then checked the Z-index value of Bar 1 and Bar 2 in my header. You can find the Z-Index value in the “SETUP” section of the INSPECTOR for the bar. It’s the first value after font size.

In my case, both BAR 1 and BAR 2 had Z-index set to 9999.

I changed BAR 2 (the one that’s supposed to be underneath BAR 1) to 9998 instead of 9999. This solved my problem.

[christopher]

Hi there,

Thank you for taking the time to explain in details the workaround you used for other users. We really appreciate your dedication to the forum.

Cheers