Welcome to the Instapage Support Center

|

Add a sticky header or footer to your page

In order to transform the top page block into a sticky header or the bottom block into a sticky footer that stays in place when you scroll down the page, you would just need to add in this code on your page. 

If you want a sticky header, add the following JavaScript code in the Settings - JavaScript menu of your page, in the Footer section: 

<script>
const header = window.__page_generator ? document.querySelector('.section') : document.querySelector('.page-block');
const headerHeight = header.clientHeight;
header.classList.add("sticky-header");
document.querySelector('body').style.marginTop = headerHeight + 'px';
</script>

 Then add the following CSS styles in the Settings - HTML/CSS - Head:

<style>
.sticky-header{
position: fixed;
top: 0;
width: 100%;
z-index: 11000000;
}
</style>

If you want a sticky footer, add the following JavaScript code in the Settings - JavaScript menu of your page, in the Footer section:  

<script>
const header = window.__page_generator ? document.querySelector('.section:last-child') : document.querySelector('.page-block:last-child');
const headerHeight = header.clientHeight;
header.classList.add("sticky-footer");
document.querySelector('body').style.marginBottom = headerHeight + 'px';
</script>

Then add the following CSS styles in the Settings - HTML/CSS - Head:

<style>
.sticky-footer{
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
}
</style>


That's it!

You can check out a demo here: 

Live Example

Note: Do not add buttons that activate a pop-up in the blocks that will be a sticky header or footer.

Have more questions? Submit a request
Was this article helpful?
23 out of 44 found this helpful

Need Further Help?

Tell us what you need and we will be happy to assist you.

Our team of expert support staff and our community can answer your questions. Submit a ticket, or reach out on live chat!