MonicaCan Posted April 4, 2022 Share Posted April 4, 2022 (edited) Site URL: https://www.hannahpark.work/ Hi, I'm trying to make the Page description ("Designer + Educator + Learner") to be sticky at the top with white background. But right now the white background is not expanding all the way to the left and right to cover the page. This is the CSS code I used: div.page-description { position:fixed !important; z-index: 1000; background-color: WHITE; padding-top: 35px; padding-bottom: 20px; padding-right: 0px; margin: auto; margin-top: -15px; text-align: center; width: 50%; } Here is the screenshot: Website: https://www.hannahpark.work/ Password: 2022 Is there any way to fix this? Edited April 6, 2022 by MonicaCan Spellings Link to comment
Solution tuanphan Posted April 5, 2022 Solution Share Posted April 5, 2022 Add this to last line in Code Injection > Footer <script> $(function(){ var visibleTop = 130; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('body.homepage .page-description').addClass('tp-sticky'); } else { $('body.homepage .page-description').removeClass('tp-sticky'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> <style> .page-description.tp-sticky { position: fixed; left: 0; width: 100%; z-index: 9999; top: 74px; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment