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"></div>

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

13 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

  4. Great tutorial, thank you so much.

    Currently struggling though. I am using the astra template but with an Elementor full size canvas layout, having placed a video on top and now trying to place a floating top centered container with my company logo which I created in an AE template.

    So far I can not get the AE content to display at all with your tutorial. Do you happen to have and idea, what I could be doing wrong?

    1. You’re welcome, Heinz.
      The first thing that comes to mind is that your are using the Elementor canvas. This in effect will not provide for the hook location that is required as in the tutorial. You could try changing it to the Default page template and then use the Astra settings on the page to disable the required elements. This will still allow the Astra hook location to function.
      Cheers!
      Lyle

Leave a Comment

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