Hi @jamesin144
Sticky positioning requires one of top,left,right, or bottom css attributes. For reference, https://www.w3schools.com/css/css_positioning.asp. I will include that messaging in an upcoming revision. You can add top: 0; to simple-banner { Custom CSS box and your custom css will work.
Thank you for the prompt response.
I’ve changed the css code to
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
for both simple banner and simple banner scrolling but it still doesn’t stick.
Am I doing something wrong?
It doesn’t look like those changes went through, do you have any plugins that cache your page? If so you may need to clear those caches in order for the changes to come through.
I’ve just cleared the cache of the entire website and tried opening up any webpage with the banner in google chrome incognito but with no luck.
When I go into developer tools to look at the css it looks like the css is showing up but not doing anything. For example, when I inspect the element for the simple banner scrolling, I can see the top:0 and the position:sticky values but the actual sticky effect doesn’t work on the webpage.
Do you have any idea why this is the case?
Yeah thats very odd, i had it working earlier and now it doesn’t work. Please remove all of the changes so for now so i can see if i can get it working. Also, for reference, you don’t need to put it in both simple-banner and simple-banner-scrolling, only simple-banner.
Ok I’ve just tested by removing the code from simple banner scrolling and only having the code in simple banner and that still didn’t work.
I’ve removed the css code for both completely for now until you get a chance to see if you can get it to work.
Okay so the sticky wasn’t working because the parent element, <body>, has the overflow property set, https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working. You could fix this by setting this in Website Custom CSS:
body {
overflow: initial;
}
I’m not sure how that would affect other things on the site. So alternatively you could just put position: fixed; in the simple-banner-scrolling CSS box and the effect you’re looking for is essentially the same.
Great looks like it works now! Thank you.
Hi there,
Great plugin. Does exactly what is required.
I also had the issue with the sticky setting. I followed your advice to “put position: fixed; in the simple-banner-scrolling CSS box”. This worked but was a bit “flicky”.
I then put “position: fixed;” into the simple-banner CSS box and it works without issue.
Thanks.
-
This reply was modified 4 years, 11 months ago by
chappers1972.
