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;

19 thoughts on “Elementor – Sticky Floating Content Anywhere”

  1. Avatar

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

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

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

      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

  3. Avatar

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

      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

  4. Avatar

    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)?

    http://www.myaloo.life

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

    Thank you in advance!!

    Best regards,
    Michel

  5. Avatar

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

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

  6. Avatar

    First off, thank you for a great tutorial for the likes of me who have no budget for elementor pro, you have helped me greatly in getting one step closer to finally adding an appealing menu to the site I am building. Now, at the risk of making a complete fool of myself (I have +/- 0 experience with web design and coding), could you help me figure out the following problem:

    I have used your method to integrate a accordeon-menu in my left sidebar. One of the problems, however, is that the entire rest of the page now also becomes ‘clickable’ for this menu, which I don’t want. If I simply raise the z-index of the rest of the content, it overrides the menu functionality. Sorry, I lack the technical terms to state the problem with precision, but you can have a look at my front page which should clarify what I mean: http://www.morphosmosis.com

    any ideas would be much appreciated!
    thank you again,
    alina

    PS: I don’t think the css part worked either. probably (?) because I don’t really know what to put in as the ‘id’

    1. Avatar

      Hi alina,
      You’re welcome πŸ™‚
      I noticed a couple things:
      – the container for the menu is very wide; this is a result of the CSS not working; id for the CSS can be anything you like as long as there are no spaces or special characters; you could call it my-menu and then adjust the CSS provided to be #my-menu
      – you didn’t mention it, but the CSS can go in Dashboard > Appearance > Customize > Additional CSS (don’t forget to click Publish once it’s entered)
      – you will need to adjust the width value in the CSS; perhaps try 200px and see how that is
      – the icon spacing CSS is not required in your situation
      – when doing a scan on your site with Sucuri SiteCheck, I noticed that you have the Granular Controls plugin installed; the author for this plugin has gone MIA for almost a year now and the plugin has not been updated to work with the latest version of Elementor; although it may not be interfering, I suggest deactivating and deleting it
      – shouldn’t need to add a z-index once the width has been addressed
      Hope this helps πŸ™‚
      Cheers!
      Lyle

Leave a Comment

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