Welcome to the Instapage Support Center

|

Add a sticky header or footer to your AMP

Note: AMP (Accelerated Mobile Page) landing pages are available exclusively for our Enterprise subscribers. Click here to get in touch with our team for more details.

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 you will need to:

1. Create a blank Instablock right under the first one that is the same size, as the new sticky header will cover it on the live page.

2. Add this code into the HTML/CSS section on the right sidebar menu of the page, in the Head section:

<style amp-custom>
section:first-child {
position: fixed;
top: 0;
width: 100%;
z-index: 11000000;
}
</style>

If you want a sticky footer you will need to:

1. Create a blank Instablock right above the last one that is the same size, as the new sticky footer will cover it on the live page.

2. Add this code into the HTML/CSS section on the right sidebar menu of the page, in the Head section:

<style amp-custom>
section:last-child {
position: fixed;
bottom: 0;
width: 100%;
z-index: 11000000;
}
</style>

You can check out a live demo here: Live Example   

Here are the blocks as seen in the builder for the page above:

stickyampp.png

Have more questions? Submit a request
Was this article helpful?
0 out of 0 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!