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 .jetmegamenuitem_label {display: border; borderstyle: solid; bordercolor: #ae946d ; borderwidth: 0px 0px 3px 0px; } jetmegamenuitem_label {display: border; borderstyle: solid; bordercolor: transparent; borderwodth: 0px 0px 3 px 0px; } jetmegamenulist: hover .jetmegamenuitem: not(:hover) .jetmegamenuitem_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/
► / @allthingselementor
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: / crocoblockcommunity
► Facebook: / crocoblock
► Twitter: / mrcrocoblock
► Instagram: / mrcrocoblock
► LinkedIn: / crocoblock