Mega Menu issue - one drop down button not working

Hi Adam and everyone,

I’m having a random issue with Mega Menu using the Drop Down option.

The second drop down doesn’t highlight when hovering over it so it can not be selected. I have 3 items in the dropdown, the first and third highlight on hover and can be selected but the second does not.

https://msy-v1.rapidwebsites.net

The page is definitely there as I have another link to that page and it’s there and can be opened by using the other link button.

I have removed and recreated but same issue happens again.

If I change to just 2 dropdown the second is still not selectable, if I change to 4 dropdowns the second is still not selectable…the 1st, 3rd and 4th work as expected…always the 2nd dropdown.

I have tried moving positions so different page but always second dropdown is not selectable??

I am not sure when this first started occurring, the site is a draft site for a client and I have just noticed today. I am positive the 2nd button was working last week.

Ok, weirder again. When I go to then parent page https://msy-v1.rapidwebsites.net/yard-products/ I can select the Cattle Yard button but from other pages the Cattle Yard button is not selectable.

https://msy-v1.rapidwebsites.net

I have cleared cache, tested with Safari, Chrome and also Firefox and same issue on all 3 browsers.

Any ideas please??

Thanks Scott

Looks like you’ve positioned a button on your page there, the “Request a Free Quote Button”, using fixed positioning. The stack you use to position it there seems to have placed it above the navigation and made it the full width of the page, see here:

That blue highlight shows the area it covers, which falls right on top of your second drop down.

Hi Adam,

That is exactly it…thanks.

But, now what do I do…I can increase the offset to 200px but then the “get a quote” button sits too low and intrudes into the page.

Any suggestions please…the client really wants to have 2 permanently on display buttons…the “contact” button in the nav bar plus a “get a quote” button.

How can I achieve this without the Pin stack causing the issue with the dropdown?

Many thanks again.

Cheers Scott

You’ll need to play with the z-index in the BWD Pin stack so that it layers below the menus. Start reducing the index value until it drops below the menu but stays above the other content on the page.

Hi DLH,

Yep, That’s what I thought.

The only thing is it needs 210px to totally avoid the dropdown, which places the Pin stack and button a little too much into the middle of the page for my liking.

I was sort of hoping of a way around moving the button any lower but seems not.

Cheers Scott

The z-index doesn’t have to do with positioning of the button in the x- and y-axis, it has to do with layering of elements on the page. It also will depend on how that stack is coded. Shoot for a lower z-index, if the stack allows it. That said, if it doesn’t then you might not be able to do what you’re wanting to do with that stack.

Hi Adam,

Ahhh…great thanks for that little bit of advise.

I have changed the z-index from 999 to 555 and it now seems to be working as I wanted.

The Pin offset is now back to 120px and the dropdown menu is not being affected.

Thanks for the help guys.

Not a problem. Glad to be of some kind of help.