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
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!
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.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
One Response
Is this all on a page?