CosminV of Technical Support
11/13/2019 - 2:09 PM

Sticky Header || Helpcenter Update

Article: https://help.instapage.com/hc/en-us/articles/217140498-Add-a-sticky-header-to-your-page-top-block-only-

The code should work for both the old and new page generator. Vanilla JS

sticky-header T-nT.html
content_copyfile_download
<!-- First, add the following JavaScript code in the Settings -> JavaScript -> Footer menu of your page: -->
<script>
var header = window.__page_generator ? document.querySelector('.section') : document.querySelector('.page-block');
var headerHeight = header.clientHeight;
header.classList.add("sticky-header");
document.querySelector('body').style.marginTop = headerHeight + 'px';
</script>

<!-- And now add the following CSS styles in the Settings - HTML/CSS menu: -->
<style>
.sticky-header{ 
	position: fixed;
	top: 0;
	width: 100%; 
	z-index: 1000;
}
</style>
Thor only.html
content_copyfile_download
<!-- First, add the following JavaScript code in the Settings -> JavaScript -> Footer menu of your page: -->
<script>
var header = document.querySelector('.section');
var headerHeight = header.clientHeight;
header.classList.add("sticky-header");
document.querySelector('body').style.marginTop = headerHeight + 'px';
</script>

<!-- And now add the following CSS styles in the Settings - HTML/CSS menu: -->
<style>
.sticky-header{ 
	position: fixed;
	top: 0;
	width: 100%; 
	z-index: 1000;
}
</style>