Welcome to the Instapage Support Center

|

Add a sticky section to your page (top section only)

In order to transform the top/first section of your page into a sticky header that stays in place when you scroll down the page, you would just need to add in this code on your page. 

First, add the following JavaScript code in the Settings - JavaScript section of your page: 

<script> 
ijQuery(document).ready(function(){ 
	$('.page-block').first().addClass('stickyheader');
var firstsection = $('.stickyheader').height();
$('body').css("margin-top", firstsection); }); </script>


And now add the following CSS styles in the Settings - HTML/CSS section:

<style>
  .stickyheader{ 
      width: 100%; 
      top: 0; 
      position: fixed; 
      z-index: 11000000; 
  }
</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 section that will be a sticky header.

Have more questions? Submit a request
Was this article helpful?
3 out of 5 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, reach out on live chat or call us now!