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: ☕
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?
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
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
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!
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
Super !
Merci beaucoup.
Bonjour, Bruno,
De rien 🙂
Cheers!
Lyle
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?
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
Thank you very much.
That exactly did the trick!
Good to hear, Heinz 🙂
Cheers!
Lyle
thats not sticky, this is fixed…
Perspective 😉
Cheers!
Lyle
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)?
www.myaloo.life
I tried several plugins but with no luck 🙁
Thank you in advance!!
Best regards,
Michel
HI Michel,
Looks as though you got it sorted 🙂 Nice looking site!
Cheers!
Lyle
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!
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
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: 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’
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
Greetings Lyle,
What a great tutorial! Thanks for the explanation…and now for responding to my comment.
After spending tons of time trying to figure out how to make a “sticky scroll” work with the free version of Elementor I came across your video which made the whole process very simple and easy to do.
After watching, I did have two questions pop up that I was hoping you would be able to help with.
1. Is there any way to hide the “sticky scroll” element completely on certain pages? (I would like the sticky element on pages such as the homepage but not for others.)
Number two, is there any way to make the sticky element disappear once the user reaches a certain point on the page? (The element works great but at the bottom of certain pages the sticky element obscure is the view of other important information.)
Thanks again!
God Bless, Collin
Hi Collin,
You’re welcome 🙂
To answer your questions:
1. one way I can think of is to use the Astra Pro addon which has conditionals as to where hooks are displayed
2. there probably is but I believe it would involve some JS which I know next to nothing about; you could probably find something with Google
Cheers!
Lyle
Nice tut, thanks! Now I’m trying to use this sticky method on my menu. It’s height is greater than the page height. I want to use the stick to bottom method, so when the user scrolls down the page (so the content goes up), the menu scrolls with the content, until the bottom of the content is reached. Then the bottom of the content should stick to the bottom of the page. I can’t get this thing to work, because when I use stick to bottom from the Elementor menu, it is positioned to the bottom right from the start (so the top of the menu is not visible). Hope you can help me with this?
Hi Jeffrey,
This request is more that what could be answered in the comments.
I would recommend that you post this to the Elementor FB group.
Cheers!
Lyle
Does not work in WP 5.3 for some reason
Not displaying on page. Im using ocean them
Hi Ross,
I just tried this with WP 5.3 and it works fine with the Astra theme. I am not familiar with OceanWP so it is probably that which is causing the problem.
Cheers!
Lyle
Great tutorial, thank you!
You’re welcome 🙂
Cheers!
Lyle