Elementor – Sticky Floating Content Anywhere

Get the Latest from Sniffle Valve

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

Buy HERE!

For help with the content presented in this tutorial, book a one-on-one online training session

Book HERE!

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:

• Elementor
• AnyWhere Elementor
• Simple CSS
• Astra Hooks

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.

CSS used in the video:

/* 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: ☕