Sticky Vertical Menu With Elementor Pro

Sticky Vertical Menu With Elementor Pro

Sticky Vertical Menu With Elementor Pro

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!

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

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!

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
>

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

Cookies essentials to the navigation on this website.

Cookies used to remember your choices regarding privacy.

Decline all Services
Accept all Services

Join me on YouTube

subscribe & get exclusive tips to be your own boss

Free branding guidelines template! Download your free copy!

Brand, market

& grow online

​By subscribing you accept to receive my newsletter and occasional marketing offers. Unsubscribe anytime.

close
Scroll to Top

Featured

Check out my favorite resources:

Subscribe to my newsletter

Menu