Elementor Pro Menu Hybrid Navigation

Elementor Pro Menu Hybrid Navigation: in this episode I’m going to show you how to use Elementor Pro to create a beautiful standard navigation on desktop while at the same time create dedicated tablet and mobile versions with Elementor Popups!

Hello, I’m your host Kaycinho, I’m a digital alchemist, and today I’m going to show you how to create a hybrid navigation for your website. For that, we will be using the Nav Menu widget from Elementor Pro for the desktop navigation, and Elementor Popups for the tablet and mobile navigation.

And cherry on the cake, I will show you 2 ways to achieve that.

Elementor Pro Menu: what about the native nav menu widget?

Now of course, out of the box, the Nav Menu Widget from Elementor Pro achieves that natively, but you may find the mobile navigation styles quite limited at the moment.

And if you’ve followed my previous videos, I’ve shown you how much more creative you can get with Elementor Popups.

Now a word of caution, this may not be the best option when it comes to SEO, but that’s not the purpose of today’s tutorial. The idea for this tutorial actually came from a question from one of the viewers, so thank you!

So, ready ? Let’s dive in!

Elementor Pro Menu Tutorial

For better results, please follow the video tutorial (above on this page or directly on Youtube), but in case you need a quick written reference, here it is :

Elementor Pro Menu Hybrid Navigation: Method 1

1. Create the navigation popup in Templates > Popups
2. Create a header section with Elementor Pro, then add the navigation with the Elementor Pro Nav Menu Widget, from a template or from scratch
3. Use the column responsive options to adapt to each device

Elementor Pro Menu Hybrid Navigation: Method 2

1. Create the navigation popup in Templates > Popups
2. Create a header section with Elementor Pro, then add the navigation with the Elementor Pro Nav Menu Widget, from a template or from scratch
3. Copy the that header section twice (1 for tablet and 1 for mobile phone)
4. For each section header, remove the unnecessary columns / content
5. Use the sections responsive options to adapt to each device

Elementor Pro Menu Hybrid Navigation: Your turn!

Now if you are interested in purchasing Elementor Pro, you can get it here.

Get Elementor Pro!

So, I hope that this video showed you how to create a slick hybrid navigation on your website!

If there are other Elementor Popups tutorials you’d like me to cover, 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.

Now 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!