Elementor – Sticky Floating Content Anywhere

Get the Latest from Sniffle Valve

Sniffle Valve logo

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

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

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.

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;
}
CSS used in the video

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

<div id="my-social">[INSERT_ELEMENTOR id="XXX"]</div>
HTML for After Header hook location

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

Leave a Comment