Create a Vertical Icons Sticky Menu with Elementor

Ever wanted to create a website with vertical sticky icons that display text when users hover over it to help users take proper action on your website or that of a client?

There are several plugins in the WordPress repository you can use to create vertical share icons but I don't think there is a plugin or addon for Elementor that allows you to achieve this feature. Below is the demo of this feature and if you'd like to take a full look at the design and experience, click here.

In this guide, you'll discover how to create a vertical sticky icon that will display an info text when users hover on them using Elementor Pro and custom CSS.

Optionally, save yourself some work and buy the premade template:

Step one: create a section/container with the "content width" set at 290

Set the "columns gap" to 'no gap' or 0px if you are using Elementor flex container. Then, give this section/container the CSS class name 'leftbar', and a z-index value of 999.

Step two: create an inner section or add another container

This inner section or container(container within the main container) will be for the menu icon and the text that will pop up to its right when hovered.

Set the Columns Gap of the inner section to 'no gap'. If you are using Elementor flex, set the "Element gap" to 0px. Make it 2 columns, and set the left one to 21% column width. 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'.

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

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.

Step three: add this CSS to 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;
}
}

Elementor Free Users: learn how to add CSS to Elementor free and how to deal with the 'selector' keyword.

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!

Conclusion

I hope you find this tutorial educative and useful in your web design project.

Thank you for reading and leave a comment if you have any questions or need assistance.