Create a Vertical Icons Sticky Menu with Elementor

Create a Vertical Icons Sticky Menu with Elementor

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

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:

Elementor Vertical Icons Sticky Menu Template

This download gets you the following template :

Elementor Vertical Icons Sticky Menu Template

Related tutorial : Elementor Vertical Icons Sticky Menu

Name your price $

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.

Create a Vertical Icons Sticky Menu with Elementor 1

Create a Vertical Icons Sticky Menu with Elementor 2

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

Create a Vertical Icons Sticky Menu with Elementor 3

Create a Vertical Icons Sticky Menu with Elementor 4

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.

Create a Vertical Icons Sticky Menu with Elementor 5

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 Icons Sticky Menu with Elementor 6

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!

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

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.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

One Response

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.