Elementor

Elementor – Sticky Floating Content Anywhere

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

Here is a simple and easy way to stick just about any content anywhere on your website. All you need is a bit of HTML and a tad of CSS.

This example uses the free versions of the following plugins, all available on the WordPress Plugin Repository:

Also used is the free Astra theme.

In the video, we will use the Elementor Social Icons and have them “stick” to the right side of the page and also to have them aligned vertically instead of horizontally.

/* Positioning and vertical alignment */
#my-social {
    position: fixed;
    display: flex;
    z-index: 999;
    top: 20vh;
    right: 2vw;
    width: 50px;
}

/* Adds spacing between icons */
.elementor-shape-rounded .elementor-icon.elementor-social-icon {
  margin-top: 10px;
}

HTML for the After Header hook location (substitute your own ID for XXX):

<div id="my-social">[INSERT_ELEMENTOR id="XXX"]</div>

Bonus: As mentioned in the video, here is the code used for the coffee cup next to the site title: &#9749;

5 thoughts on “Elementor – Sticky Floating Content Anywhere”

  1. Thank you for a great tutorial, I was able to create a sticky menu exactly how i want it. I just need a bit of help. I would like the menu to fade out when a visitor scrolls down and fade back in when scrolling stops. Would this be achieved by adding a div class of fade in wrapped in the shortcode under the previous hook and the attributed in simple css with the class of .fade?

    1. You’re welcome, Richard and great to hear that it works for you 🙂
      Not sure about the fade on scroll; would have to do some testing to see.
      Will report back if I come up with anything.
      Cheers!
      Lyle

  2. Wow thank you so much for the reply! I will also keep working on a solution, no luck yet.

    Thanks again for your feed back

  3. Great video. How did you create the popup box shown at 10 min 20 seconds on your video?

    Its exactly what I have been looking for!

    1. Sniffle Valve

      Hi Gusavo,
      That is done with the same method as shown in the video except that there is additional CSS to control when it shows and when it hides. The close X is also just CSS.
      I haven’t done a tutorial for this yet but will be doing so in the near future. Be sure to subscribe so that you will be notified when it’s available 🙂
      Cheers!
      Lyle

Leave a Comment

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