Links In Max Mega Menu Column Item Layered Over WooCommerce Widget

[alexwright]

Hi-

Please head here :

http://smartchargeam.staging.wpengine.com/ev-chargers/home/

And in the main menu, drop down “Charging Stations”

Try to click the link for the middle “Sale EV Chargers” WooCommerce Widget. You’ll see the hover links for the left hand “All Charging Stations” column are highlighted. It’s not possible for me to click on the middle WooCommerce Widget. The right hand WooCommerce Widget shows up fine.

It looks like the li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item or the li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item li.mega-menu-item > a.mega-menu-link items are spanning two columns.

Any advice?

THANKS!

-Alex

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi Alex,

I cannot replicate this on your site on Chrome + Mac. What OS are you?

I would think this is a z-index issue, but without being able to replicate I am unable to be certain.

[alexwright]

I’m on Chrome + Mac. I see it, too, with Safari on Mac as well as Firefox on Mac (shudder). It’s literally not possible to click on the item in the “Sale EV Chargers” in the “Charging Stations” dropdown menu because the active link is coming from the ~600px wide span of the links in the column to the left.

Did you check out the screenshot from Crome on Mac dev tools?

THANKS!

-Alex

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

ul.mega-sub-menu li.mega-menu-columns-1-of-3 {
     overflow: hidden!important;
}

-Rui

[alexwright]

Perfect. That did the trick. Thanks!

[Rui Guerreiro – SUPPORT]

Great. Glad it’s sorted.
-Rui