nbamir Posted June 24, 2023 Posted June 24, 2023 Hi, I am trying to make the the block #block-yui_3_17_2_1_1687611542744_293271 which says Hello World sticky on my website. My HTML: <div class="sticky"> <p>Hello, World!</p> </div> CSS: #block-yui_3_17_2_1_1687611542744_293271{ position: sticky; background:red; top:0; } However, I can't seem to make any element sticky. Can someone help with this?
tuanphan Posted June 25, 2023 Posted June 25, 2023 Can you share link to page where you use use #3271 block? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
nbamir Posted June 25, 2023 Author Posted June 25, 2023 (edited) Oh I already shared it somewhere but looks like it didn't turn up in the post. Here it is: https://www.nbamir.com/jadu-ar-the-first-encounter I'm trying to make the block stick to the top when you scroll past it. Edited June 25, 2023 by nbamir
Solution MayaViolet Posted June 25, 2023 Solution Posted June 25, 2023 Hey @nbamir - it looks like you have this code applied to your site: html, body { overflow-x: hidden; } Anytime overflow-x is set to hidden, this will cause conflict with the sticky property. If you're having overflow-x issues, you can try to target the section in particular that is causing the conflict rather than the whole body to make sure your sticky section works. Hope this helps! tuanphan 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment