Sticky Vertical Menu With Elementor Pro? How to create a sticky vertical menu if your WordPress theme doesn’t offer that option out of the box. Today, I’ll show you how to create a modern sticky vertical menu with Elementor Pro!
Sticky Vertical Menu With Elementor Pro: What You Need
hello, I’m your host Kaycinho, I’m a digital alchemist, today, I’m going to show you how to re-create the modern and beautiful sticky vertical menu of a site of the day nominee on the Awwwards website.
And for that we’ll use Elementor Pro only.
Even though I will be using the free version of the WordPress Astra theme, feel free to try out with your theme. But if you want to follow along exactly as I do, you might as well install Astra.
It’s free and lightweight.
The only premium plugin we’ll use for this tutorial is Elementor Pro.
If you are interested in purchasing Elementor Pro, here is a handy link:
No need to say to I recommend Elementor Pro because I absolutely love this tool and I use it each and every day.
Sticky Vertical Menu With Elementor Pro: Step By Step
The tutorial video will provide the best experience to complete this tutorial, but here are the steps outlined, for a quick reference:
Sticky Vertical Menu With Elementor Pro: Step 1
In this step, we first need to setup our WordPress install :
- set the permalinks
- create the homepage (don’t edit it yet)
- add your images in the media library
- in Appearance > Menus: create a new menu
Sticky Vertical Menu With Elementor Pro: Step 2
Next, time to edit and style our Homepage with Elementor Pro.
- create a hero section with a title and a call to action
- create a second section under the hero section
- link the hero call to action to the second section
Sticky Vertical Menu With Elementor Pro: Step 3
Once your homepage is looking good, now is the time to theme the WordPress page template with Elementor Pro
- install the free plugin Sticky Menu (or Anythin!) on Scroll and in the settings, add the class .mynav
- create a section with 2 columns (5% and 95%)
- first column: add the logo and icons to the first column
- first column: in the advanced tab, in the custom CSS module, add .mynav {height:100vh}
- first column: in the advanced tab, in the class field, add mynav
- first column: hide in tablet and mobile mode
- second column: add a post content widget
- tablet / mobile: create a regular header (and hide it for the desktop view)
Sticky Vertical Menu With Elementor Pro: Step 4
For the last step, create a popup with Elementor Pro:
- style according to your liking (or follow the video!)
- set desktop width of the modal to 66 vw
- set tablet width of the modal to 66 vw
- set mobile width of the modal to 85 vw
- publish the popup for the whole website
- link the navicons from the WordPress page template (from step 3) to the newly created popup
Sticky Vertical Menu With Elementor Pro: Get Elementor Pro
If you are interested in purchasing Elementor Pro, here is a handy link:
Sticky Vertical Menu With Elementor Pro: Your Turn
So, I hope you now feel empowered to create beautiful modern sticky vertical menus with Elementor Pro!
If there are other WordPress and Elementor reviews you’d like me to cover, please 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, please 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.
As well as 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!
| 
