Sticky Vertical Menu Elementor Pro Navigation v2

kaycinho

Sticky Vertical Menu Elementor Pro Navigation v2

June 4, 2020
, 12:57 am
, Resources, Skills, Tutorials, Web design, Web development, Wirementor

Sticky vertical menu Elementor Pro: This is the version 2 of this popular video tutorial! This time, with Elementor Pro alone, without the need of additional plugins!

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!).

hello I’m your host Kaycinho, I’m the Digital Alchemist, and today I’m happy to share with you the version of my popular tutorial on how to create a sticky vertical menu navigation with Elementor Pro.

Sticky vertical menu Elementor Pro: the Css code

Here is the CSS code for the popup:

selector {z-index:10;}

Here is the CSS code for the single page template:

@media only screen and (min-width: 1025px) {
    /* change the min-width value above to your liking / needs */
    
    .my-header {
        display:none;
    }
    
    .my-vertical-nav /* column on the LEFT */ {
        position: fixed!important;
        top: 0!important;
        height: 100vh;
        max-height: 100vh!important;
        overflow:hidden!important;
    }
    
    .my-vertical-content /* column on the RIGHT */ {
        margin-left: 5%; /* match this value with the left column width in Elementor */
    }
    
    .my-footer {
        margin-left:5%; /* match this value with the left column width in Elementor */
        
    }
}

Sticky vertical menu Elementor Pro: the pre-requisites

Sticky vertical menu Elementor Pro: the steps

A video is worth a million words, but just in case, here is a quick reference of the steps involved to follow this tutorial: 1. Create the popup with Elementor Pro 2. Create the custom header and footer with Elementor Pro 3. Create the single page template with dual columns

Sticky vertical menu Elementor Pro: Your turn

So, I hope that you now feel confident to create a beautiful sticky vertical menu navigation with Elementor Pro! Question of the day: what do you like about vertical sticky menus? 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 Youtube channel – It does really (did I mention REALLY?) help me tremendously! Also, if you know someone that could benefit from it, would you share it now? Also, if you want to grow your creative business / career, 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 one, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!