GP compatible image map plugin

Hi there,

i am not sure about the image map plugin. Might be worth asking in our Facebook group.

https://www.facebook.com/groups/generatepress

For the submenu icons - try this CSS:

.menu-item-has-children .dropdown-menu-toggle:before {
    transition: all 0.2s ease-in-out;
}
.menu-item-has-children:not(:hover) .dropdown-menu-toggle:before {
    transform: rotatez(-90deg);
    transition: all 0.2s ease-in-out;
}

Thank you, David!
Is there also a way to make the submenu drop at the same time that the arrow rotates?

Thanks again!
Dawn

Try this so it rotates on click:

.dropdown-click .menu-item-has-children.sfHover>a .dropdown-menu-toggle:before {
    content: "\f107" !important;
    transition: all 0.2s ease-in-out;
}

.menu-item-has-children:not(.sfHover) .dropdown-menu-toggle:before {
    transform: rotatez(-90deg);
    transition: all 0.2s ease-in-out;
}

Hi David.

I appreciate your help. I'd like the arrow to rotate on hover (not on click) and also drop the submenu on hover.

Can you change the Navigation Dropdown to Hover in Customizer > Layout > Primary Navigation.

Thanks, David!

Your first response actually addressed my issue, but I had an underlying problem. The menu wasn't responding as expected because the top row was interfering. Thanks so much!

Dawn

I wanted to follow up on creating image maps and let you know what I found. There are some great HTML generators for image maps. Upload the image and it will calculate the coordinates and generate the code :) This was the best one that I found: https://www.zaneray.com/responsive-image-map/

Thats cool - thanks for sharing :)

Hi David.

The arrow rotation was working fine and now it stopped all of a sudden. Can you offer any insight?

OK - so with the Icon Type set to SVG you need some other CSS. Try replacing your CSS with this:

.menu-item-has-children .dropdown-menu-toggle .gp-icon {
    transform: rotatez(-90deg);
    transform-origin: center;
    transition: all 0.2s ease-in-out;
}

.menu-item-has-children:hover .dropdown-menu-toggle .gp-icon {
    transform: rotatez(0);
}

Perfect! Thanks! I had switched to svg because PageInsights was dinging my score for render blocking.

You're welcome