- This topic has 12 replies, 2 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
Hi there!
Is there a plugin for image mapping that you recommend for GP? I want to have a collage image with multiple clickable URLs.
Also had another question on menus. Is there a built-in way to get the arrows next to the submenu to rotate sideways until moused over?
Thanks!
DMCustomer Support
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!
DawnTry 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
- You must be logged in to reply to this topic.
