Archived topic

Menu dropdown appearing below content?

5 replies · Started by Jim on January 19, 2017

Viewing posts 1–6 of 6

January 19, 2017 at 7:14 am #265779

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

January 19, 2017 at 7:28 am #265786

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

January 19, 2017 at 7:38 am #265787

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

January 19, 2017 at 10:21 am #265832

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 );
}

January 19, 2017 at 10:57 am #265853

Many thanks Tom. Just what I was after.

January 19, 2017 at 4:53 pm #265942

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.