[Resolved] Drop-down menu on the primary nav bar is stacking behind the header image

[Carrie]

The drop-down menu on the primary nav bar isn’t working on all pages – it’s like it’s showing up behind the hero images or something? Please let me know how to fix it.

GenerateBlocks told me to do this (below), because I reached out to them intially when it happened after I used GenerateBlocks to add a hero image, but after the CSS change it’s still happening on this page: https://afoqt.hissyfitdev.com/afoqt-study-guides/verbal-analogies/

PAST SUPPORT INSTRUCTION:
GenerateBlocks <support@generateblocks.com> wrote:
Hi Carrie,

You have this CSS on your Appearance > Customize > Additional CSS.

/* Primary navigation styles */

.main-navigation:not(.toggled) .main-nav > ul {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}

Try adding z-index property to it.

Example:

/* Primary navigation styles */

.main-navigation:not(.toggled) .main-nav > ul {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}

[Ying]

Hi Carrie,

Try add this CSS:

nav#site-navigation {
    position: relative;
}

Let me know 🙂

[Carrie]

It looks like it resolved itself somehow, without adding that CSS – so I’ll mark this ticket as resolved. Thanks!

[Ying]

Hum…that’s weird… But anyway glad it’s working now 🙂

[Author]

Posts