Header Menu Not Working on Large Screens

[StickAndGrow]

Hi,

I’m having some trouble with my pro header in large screens. The menu doesn’t work at all.

Can you help, please?

Thanks!

[Prasant]

Hello @StickAndGrow,

Thanks for asking.

You will need to adjust the z-index value of bar that’s holding navigation and buttons. Here’s a screencast that you can take a look. Essentially navigation bar will get higher z-index value.

Thanks.

[StickAndGrow]

Hi,

If I do that, I lose the curved section that overlaps this header photo. I had to increase that Z index to get this effect of overlapping the section header with the header image.

Thank you.

[Alaa]

Hi @StickAndGrow

I’ve created a duplicated demo page with a duplicated demo header (the link is in Secure Note).

Please check it, because I can see the header menu is working fine there with the z-index fix mentioned by @Prasant, all I did was to add this CSS code snippet in the element CSS section for Desktop Header Menu:

$el {
  z-index: 99999;
}

Thanks.

[StickAndGrow]

Ah! I see! I was attempting to fix it with the whole bar rather than the individual element.

Thank you.

I tried to use the same code to fix the problem on the mobile navigation element as well but it doesn’t seem to be working for me.

Can you see what I’ve done wrong?

[ruenel]

Hello There,

If you have added the code in two or more elements, you will have to adjust the z-indexes. One will be 99999, the other will have to be 99998 or 99997. No duplicate or more element should be using the same code.

Hope this helps.

[StickAndGrow]

@Alaa

$el {
z-index: 99999;
}

Hi,

I have made the desktop menu 9888 and the mobile 9999 and the mobile still isn’t working.

Can you please help?

Thank you.

[paul.r]

Hi,

Try to set your Menu Bar mobile Bar to a much lower z-index.

Hope that helps

[StickAndGrow]

Hi,

A lower z index did not work but a much higher one did.

Thank you for pointing me in the right direction, though!

[basanta]

Glad that you figure it out.

Thanks