Menu on wrong layer: under text, images

[frautanja]

#792802

I have designed a menu with the menu builder.
But when it expands it opens unter the page elements. Meaning: images and text of the pages are shown on top of the menu items so that these are not visible.

Any ideas how to fix that?

[GrueneRaider]

#792832

I have the same problem using the header builder.

[GrueneRaider]

#792845

You can see it at the link below. Hover over MY LOCKER in top right.

https://hardwoodtexas.com/test-header

[marklchaves]

#793241

Hello @grueneraider,

You can try lowering the z-index for your top-level navbar. It’s set to 152 right now, and I don’t think it needs to be that high.

.fusion-fullwidth.fusion-builder-row-2 {
    z-index: 1 !important; /* Lower this so that the submenu above displays over it. */
}

Thanks!

[marklchaves]

#793242

Hi @grueneraider,

Here’s a screengrab of the result that worked for me.

https://imgur.com/a/mwn5kbC

Thanks!

[frautanja]

#793295

Thanks. I pasted your code in the custom css area but it makes no difference.

https://imgur.com/RUkMcQo

[frautanja]

#793299

I guess the menus (main, sub) have to get a higher z-index. But as I am not a coder I have no idea to do so.
Can someone help me with that?

Thank you very much.

[MarcSt]

#793303

I have the same problem. Looking for help.

[marklchaves]

#793307

Hello @grueneraider,

I don’t see the custom CSS code in your page. Can you please make sure you’ve saved it and you’ve cleared/purged any server caches you have?

https://imgur.com/a/5xwLHyp

How to add custom CSS to WordPress.

Thanks!

[AnitavanKempen]

#836350

hi, i have a similar problem with the submenu specially in the mobile view. I build it with the Avada layout builder and already understand that i have to change the Z-index, but i don’t know where to address it.
Another issue is, that i would like to reduce the padding or the line-height of the submenu. How can i adress that?

everthing on https://www.wilfriedscooking.com/

Thanks

[yasin1989]

#846101

hi , try this
use this code in Custom CSS
…

#wrapper #main .fullwidth-box .fusion-row {
z-index: 1 !important;
}

[Grafdesign]

#857492

You can raise the whole container. Give the container a class name like “raise”. Then go to the custom css in global options and type: .raise {z-index:20;}

That should fix the issue.

[LBrand309]

#863131

You can raise the whole container. Give the container a class name like “raise”. Then go to the custom css in global options and type: .raise {z-index:20;}

Thanks @Grafdesign – your fix worked perfectly (and easily!) for me.

[SteveC]

#866450

Yes! .raise {z-index:20;} worked perfectly. Many thanks!

[treyholland]

#871779

Very helpful for mobile menu issues, worked perfectly.
Thank you!

[Author]

Posts