Skip to main content

Sticky Header for Mobile (Amplify)

Place this code in the 'Site-wide custom HTML before </head>' field of the Advanced tab to make the header stick to the top of the page for mobile users as they scroll up and down the homepage:

 

<style>

/*Targeting mobile screens*/

@media (max-width: 768px) {
    .amplify-container.amplify-container-header.amplify-target-locator {
      position: sticky;
       top: 0;
      z-index: 1000;
    }
  }

</style>

 

Since this only works for Amplify homepages, use this code to apply the same functionality to non-amp pages