Jump to content

Sticky page description not working properly

Go to solution Solved by tuanphan,

Recommended Posts

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:

image.thumb.png.9772625b7e1fc09696100b5246f578a4.png

 

Website: https://www.hannahpark.work/

Password: 2022

Is there any way to fix this?

 

Edited by MonicaCan
Spellings
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.