Play Video

Designing Elementor Mega Menu Like Puma Has with Ed Herzog

In this video tutorial, Ed Herzog from All Things Elementor designs a mega menu like the Puma website has, using the #JetMenu plugin and #Elementor page builder.

💡 Tips & Tricks:
► Add certain product categories to the menu faster:
https://bit.ly/35kuh8d
►18:30 To add hover effect, pass this code:
selector a:hover {color: #000000 !important;}
►36:08 Adding hover and fading effect to the menu item with the code:
a:hover .jet-mega-menu-item_label {display: border; border-style: solid; border-color: #ae946d ; border-width: 0px 0px 3px 0px; } jet-mega-menu-item_label {display: border; border-style: solid; border-color: transparent; border-wodth: 0px 0px 3 px 0px; } jet-mega-menu-list: hover .jet-mega-menu-item: not(:hover) .jet-mega-menu-item_label{color:#aaaaaa:}
————-
►Get JetMenu plugin:
https://bit.ly/33Ep76i
►Unlock Crocoblock subscription advantages:
https://bit.ly/3LS5MQn
————-
⚡Follow Ed Herzog for more useful content:
►https://elementorservices.com/
►https://www.youtube.com/channel/UCvOQrsHXzI2afTk5aGWe-_w

————-
💡Helpful documentation:
► Creating custom header with JetThemeCore:
https://bit.ly/3BK6BGu
► How to add the menu to a header template using JetBlocks:
https://bit.ly/3sXiGUG

► TIMESTAMPS

00:00 – Introduction
01:59 – Enabling Revamp Menu Option
02:35 – Creating Puma Mega Menu
04:06 – Assigning Menu to a Theme Location
04:37 – Adding Mega Content to “New Arrivals” Menu Item
14:13 – Adding Mega Content to “Women” Menu Item
20:26 – Saving Created Mega Content as Puma Mega Menu Template
21:14 – Applying Puma Mega Menu Template to “Men” Menu Item and Editing it
22:32 – Applying Puma Mega Menu Template to “Kids” Menu Item and Editing it
25:57 – Saving Edited Mega Content as Puma Mega Menu 2 Template
27:00 – Applying Puma Mega Menu Template to “Collaborations” Menu Item and Editing it
28:56 – Applying Puma Mega Menu Template to “Sport” Menu Item and Editing it
30:17 – Applying Puma Mega Menu 2 Template to “Outlet” Menu Item and Editing it
31:27 – Creating Header Template
33:51 – Customizing Mega Menu Widget

——————

Join us here:
► FB Community: https://www.facebook.com/groups/CrocoblockCommunity
► Facebook: https://www.facebook.com/crocoblock/
► Twitter: https://twitter.com/mrcrocoblock
► Instagram: https://www.instagram.com/mrcrocoblock/
► LinkedIn: https://www.linkedin.com/company/crocoblock