[Resolved] Menu dropdown appearing below content?

[Jim]

Hi,

I’m in the process of building a new site (mmconstruction.services). I’ve just noticed that I have my main menu’s submenu (dropdown) appearing below some on-page content. I’ve not changed any of the z-index so I’m not sure what’s going on? Can’t seem to find the reason why? It is most noticeable on the contact page where the menu goes below a simple Ninja Form.

http://www.mmconstruction.services/contact-us/

However, its also happening on the blog page too as you cant scroll all the way down the submenu before it loses focus. The dummy post seems to be above it?

http://www.mmconstruction.services/news/

Any help would be much appreciated?

Jim

[Leo]

Hi Jim,

Just tested in Chrome and Firefox but don’t think I’m seeing what you are seeing?

Here is what I see:
https://s30.postimg.org/r9s87556p/shot1.jpg
https://s30.postimg.org/5d7wkknf5/shot2.jpg

[Jim]

Hi Leo,

Your screenshots were still showing the problem. Submenu going below form background?

However, looks like I managed to find the little critter! I had the following opacity setting on the submenu background, which was causing the problem. I’ve used these setting before on a different GP site without issue. Tested it with plugins off too and it still failed?

.main-navigation .main-nav ul {
opacity: 0.95 !important;
}

Thanks for looking into it though.

Cheers

Jim

[Tom]

opacity shouldn’t be used with anything that contains text.

Instead, use RGBA (which is included in the next GP Premium):

.main-navigation .main-nav ul {
    background-color: rgba( 0,0,0,0.95 );
}

[Jim]

Many thanks Tom. Just what I was after.

[Tom]

You’re welcome 🙂

[Author]

Posts