Create a Vertical Icons Sticky Menu with Elementor

and some custom code. CSS only! Elementor free compatible.

While you can get a similar menu with a plug-in, it doesn't offer quite the level of flexibility and customization that making it all with Elementor and some CSS can provide.

With this method, get exactly the look you want, with the icons of your choice.

To start, create a section with the Content Width set at 290

Also set the Columns Gap to 'no gap',  and give it the CSS class 'leftbar', and a z-index value of 999.

Create a Vertical Icon Sticky Menu with Elementor
Create a Vertical Icon Sticky Menu with Elementor

Then, create an inner section for the first menu item, and the text that will pop-up to it's right.

Set the Columns Gap of the inner section to 'no gap'.  Make it 2 columns, and set the left one to 21% Column Width, under the columns options. Also set the z-index of the left column to 9. Set the responsive option of the right column to be disabled on mobile.

Importantly, give the left column the class 'leftcolumn'.

Create a Vertical Icon Sticky Menu with Elementor
Create a Vertical Icon Sticky Menu with Elementor

When you get everything the way you want it to look, duplicate the inner section until you got all the menu items you want.

Create a Vertical Icon Sticky Menu with Elementor

To get soft corners, add a Border Radius to the top and bottom items, in the Columns Style settings. This is the setting for the top column that contains the icon.

Create a Vertical Icon Sticky Menu with Elementor

And finally, add this CSS to you page

Navigate Home

Contact Me

Like Our Page

Navigate Home

Contact Me

Like Our Page

Add this CSS wherever you prefer! I like to keep it all in the same place to find it easily afterwards. In Page settings / Advanced / Custom CSS is a good place.

 
 .leftbar{
     position: fixed;
     left: 0;
     top:39%;
}
 .leftcolumn + .elementor-column{
     opacity: 0;
     left:-390px;
     transition: all .3s ease-in-out;
}
 .leftcolumn:hover + .elementor-column, .leftcolumn + .elementor-column:hover{
     opacity: 1;
     left:-8px;
}

@media (max-width: 766px) {
  .leftcolumn {
    max-width: 56px;
    height: auto;
}
}

If you would like the design to be on the right, use the code below instead

 .rightbar{
     position: fixed;
     right: 0;
     top:39%;
     pointer-events: none;
}
 .rightdesign .elementor-column:first-of-type{
     opacity: 0;
     right:-390px;
     transition: all .3s ease-in-out;
}
 .rightdesign:hover .elementor-column{
     opacity: 1;
     right:0;
     pointer-events: all;
}
.rightdesign .elementor-column:nth-of-type(2) {
         pointer-events: all;
}

@media (max-width: 766px) {
  .rightdesign .elementor-column:nth-of-type(2) {
    max-width: 56px;
    height: auto;
    right: -8px
}
}

For the 'right' aligned design, you will also need to adjust the class names

Give the parent section the class name 'rightbar' and each inner sections the class name 'rightdesign'.

Then, the code should take care of the rest!

You might need to adjust the ' right: -8px' for the mobile version to be aligned properly on the right.

That's it! Thanks for checking it out!

Let me know if you need help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Element Or Codes>