Create a Vertical Icons Sticky Menu with Elementor

and some custom code. CSS only! Elementor free compatible.

While you can get a similar menu with a plug-in, it doesn't offer quite the level of flexibility and customization that making it all with Elementor and some CSS can provide.

With this method, get exactly the look you want, with the icons of your choice.

To start, create a section with the Content Width set at 290

Also set the Columns Gap to 'no gap',  and give it the CSS class 'leftbar', and a z-index value of 999.

Create a Vertical Icon Sticky Menu with Elementor
Create a Vertical Icon Sticky Menu with Elementor

Then, create an inner section for the first menu item, and the text that will pop-up to it's right.

Set the Columns Gap of the inner section to 'no gap'.  Make it 2 columns, and set the left one to 21% Column Width, under the columns options. Also set the z-index of the left column to 9. Set the responsive option of the right column to be disabled on mobile.

Create a Vertical Icon Sticky Menu with Elementor
Create a Vertical Icon Sticky Menu with Elementor

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

Create a Vertical Icon Sticky Menu with Elementor

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

And finally, add a CSS class to every columns

In this example 6 CSS classes are needed, I named mine 'homeicon' , 'texticon' , 'facebookicon' , 'navhome' , 'textme' , 'likepage' . I will let you guess what Icon and pop-up message got what name.

Also add the class 'baricons' to every icon element.

Create a Vertical Icon Sticky Menu with Elementor

Contact Me

Like Our Page

The Code

Add this CSS wherever you prefer! I like to keep it all in the same place to find it easily afterwards. In Page settings / Advanced / Custom CSS is a good place.

 
  1. .leftbar{
  2. position: fixed;
  3. left: 0;
  4. top:39%;
  5. }
  6. .textme{
  7. opacity: 0;
  8. left:-390px;
  9. -webkit-transition: opacity .3s ease-in-out;
  10. -moz-transition: opacity .3s ease-in-out;
  11. -ms-transition: opacity .3s ease-in-out;
  12. -o-transition: opacity .3s ease-in-out;
  13. transition: opacity .3s ease-in-out;
  14. transition: all .3s ease-in-out;
  15. }
  16. .texticon:hover + .textme{
  17. opacity: 1;
  18. left:-8px;
  19. }
  20. .navhome{
  21. opacity: 0;
  22. left:-390px;
  23. -webkit-transition: opacity .3s ease-in-out;
  24. -moz-transition: opacity .3s ease-in-out;
  25. -ms-transition: opacity .3s ease-in-out;
  26. -o-transition: opacity .3s ease-in-out;
  27. transition: opacity .3s ease-in-out;
  28. transition: all .3s ease-in-out;
  29. }
  30. .homeicon:hover + .navhome{
  31. opacity: 1;
  32. left:-8px;
  33. }
  34. .likepage{
  35. opacity: 0;
  36. left:-390px;
  37. -webkit-transition: opacity .3s ease-in-out;
  38. -moz-transition: opacity .3s ease-in-out;
  39. -ms-transition: opacity .3s ease-in-out;
  40. -o-transition: opacity .3s ease-in-out;
  41. transition: opacity .3s ease-in-out;
  42. transition: all .3s ease-in-out;
  43. }
  44. .facebookicon:hover + .likepage{
  45. opacity: 1;
  46. left:-8px;
  47. }
  48. @media (max-width: 766px) {
  49. .baricons {
  50. max-width: 16px;
  51. height: auto;
  52. }
  53. }

That's it! Thanks for checking it out!

Let me know if you need help!

Leave a Reply

Your email address will not be published. Required fields are marked *