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;

17 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.

  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 πŸ™‚

  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.

  5. Dear Lyle,

    Would you help me and pass me the correct css code to make the left part of this website here to be sticky (logo with nav underneath)?


    I tried several plugins but with no luck πŸ™

    Thank you in advance!!

    Best regards,

  6. Now you can actually do it without anywhere Elementor simply by creating elementor section template and pasting it’s shortcode into hooks. Rest the same. Works wonderfully!

    1. Hi mahdemanter,
      Yes, that is true if you have Elementor Pro. The reason I used AE is for those who are on a budget and do not have E Pro … yet πŸ™‚

Leave a Comment

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