Wp Mega Menus are great when you have a lot of content on your website and you want to make it easy for people to browse through your content.
So today I’m going to show you how to create mega-menus with the power of Elementor Pro and JetMenu from Crocoblock.
So how do we that? Let’s find out!
Wp Mega Menus: tools for the job
hello, I’m your host Kaycinho, I’m a digital alchemist, and today I’m going to teach you how to create a mega menu with Elementor Pro as well as the JetMenu plugin from Crocoblock.
Elementor Pro is the premium addon to the free Elementor page builder, and Crocoblock is a suite of plugins made specifically for Elementor.
These two are premium plugins that I strongly recommend because they make my life easier and actually bring in a lot of fun back into creating websites.
It also lets me spend more time creating and less time fiddling around.
If you’re interested in purchasing either of these, click on the buttons below:
So, enough talking, let’s dive in!
Wp Mega Menus Tutorial
For the onscreen tutorial, watch our video. But if you want a quick reference, here it is:
- in Plugins: install JetThemeCore
- in Crocoblock: install & activate JetMenu
- in Appearance > Menus: create a menu and set it as the main menu
- in Appearance > Menus: enable JetMenu for that location (option on the left handside)
- in Templates > Theme builder: create an Elementor Pro Header
- in Elementor: design your header and add Jet Mega Menu from widgets
- in Jetmenu settings > General: select the option “Width same as custom Css selector width” and type .elementor-inner
- in Jetmenu settings > General: remove css cache while working on nav
- in Jetmenu settings > General: change mobile breakpoint to 812 (for iphone X)
- in Jetmenu settings > Main menu styles: 1px border right in settings
- in Jetmenu settings > Main menu styles: last item border = none
- in Jetmenu settings > Main menu styles: color + bg: default / hover / active
- in Jetmenu settings > Main menu styles: item padding : 30px all
- in Appearance > Menus: create custom menus
- in Appearance > Menus: enable mega menu on the second item, then click on Edit, an Elementor builder window will appear
- in Elementor builder: design your mega menu in
- in Appearance > Customizer > Css: add the following code then click on publish:
.jet-sub-mega-menu {
max-width: 120%!important;
}- in Jetmenu settings > General: re-enable css cache once you’re happy with the outcome
Wp Mega Menus: let your creativity flow with Elementor Pro and JetMenu from Crocoblock
If you’re trying to create flexible and beautiful Wp mega menus, I definitely recommend Elementor Pro and JetMenu.
And not just for mega menus! Elementor Pro is THE must-have plugin if you’re serious about creating websites on WordPress.
And the Crocoblock suite of premium addons for Elementor offers outstanding quality, especially for the price! There is so much goodness packed in that offer that I definitely recommend the lifetime package while it’s available!
Wp Mega Menus: Your turn!
So, I hope that you enjoyed this tutorial and that you now feel confident to create your own mega menu with the help of JetMenu & Elementor Pro. Let me know in the comments.
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the channel and if you know someone that could benefit from it, I’m going to ask you if you’d like to share it now?
Because let’s face it, there are so many things to do in a day that if you don’t do it now you’ll probably forget.
If you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy and tips, tools, services and case studies that can help you grow your business online.
So, that’s it for this episode, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
