Create a Vertical Icons Sticky Menu with Elementor

Create a Vertical Icons Sticky Menu with Elementor

Element.How also offers premium tutorials! Check them here:

Table of Contents

In this tutorial, you will learn how to create a vertical icon sticky menu navigation with Elementor.

Here is what we will create:

Please log in to access this template. It's free! Login here

 

Importing the template, and then editing the HTML element is the quickest way to replicate this design.

To start with, create a container with the "content width" set at 290px

Set the layout to full width, set the width to 290px and set the gap to 0.

Create a Vertical Icons Sticky Menu with Elementor 1

Then, give this container the CSS class name 'leftbar', and a z-index value of 999.

Create a Vertical Icons Sticky Menu with Elementor 2

 

Now, add an inner container

We want to replicate this structure:

Create a Vertical Icons Sticky Menu with Elementor 3

For now, add only the first "Call" container.

This inner container will be for the menu icon and the text that will pop up to its right when hovered.

Set Direction to row, set Align Items to Stretch, and set Gaps to 0px,

Create a Vertical Icons Sticky Menu with Elementor 4

Now add the Icon and Heading element.

Give the icon the class name "left-icon" and a z-index of 9.

Create a Vertical Icons Sticky Menu with Elementor 5

Adjust the rest of the icon's settings and heading settings as you wish.

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

Create a Vertical Icons Sticky Menu with Elementor 6

Then, add this Elementor sticky icon expanding on hover CSS

<script> 
/* Please login to get the code 
 * The code will be for the Create a Vertical Icons Sticky Menu with Elementor tutorial 
 * Found at this URL https://element.how/create-a-vertical-icons-sticky-menu-with-elementor/ 
 */ 
</script>

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, make these changes

To have it be on the right of the screen instead, near the start of the CSS, change

left: 0;

to

right: 0;

and then, for every "Call" container, make them row-reverse.

Create a Vertical Icons Sticky Menu with Elementor 7

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 help!

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

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

Checkout the Elementor Addon Finder directly

One Response

Leave a Reply