How to Make a Sticky Menu with Vertical Icons in Elementor (easily method)

While a plug-in can provide a comparable menu, it lacks the flexibility and customisation that Elementor and some CSS can provide.

How to Make a Sticky Menu with Vertical Icons in Elementor

To begin, make a section with a Content Width of 290. Set the Columns Gap to ‘no gap,’ and give it the CSS class ‘leftbar,’ as well as a z-index of 99.

Create an inner section for the first menu item, as well as the text that will appear to the right of it.

Set the inner section’s Columns Gap to ‘no gap’. Under the columns choices, make it two columns and set the left one to 21 percent Column Width. Set the left column’s z-index to 9 as well. Set the right column’s responsive option to disabled on mobile.

Give the left column the class ‘leftcolumn.’ This is crucial.

Once you’ve got everything looking like you want it to, replicate the inner part until you’ve got all of the menu items you want.

Add a Border Radius to the top and bottom items in the Columns Style settings to get soft corners. This is the setting for the icon-containing top column.

Finally, include this CSS into your page.

 .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;
}
}

Use the code below instead if you want the design to be on the right.

 .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
}
}

You’ll also need to change the class names for the ‘right’ aligned design. Give the parent section the name ‘rightbar,’ and each inner section the name ‘rightdesign.’ The code should then take care of everything else!

For the mobile version to be oriented properly on the right, you may need to alter the ‘ right: -8px’.