How can I make the header sticky?

One of the most popular requests I hear is how to make the website’s header “sticky” so that it remains at the top of the browser window whilst a visitor scrolls down the page. This is a particularly popular request for templates in Squarespace’s Brine family as there isn’t a tweak available in Site Styles. However, you can achieve this with some CSS.

To add the CSS, navigate to Design > Custom CSS, and add the following:

.Header, .Mobile {
  width: 100%;     /* for IE and Edge */
  position: fixed; /* for IE and Edge */
  position: -webkit-sticky; /* For Safari 6.1+ */
  position: sticky; /* Latest browsers */
  top: 0;
  z-index: 4;
}

There are over 40 templates in the Brine family. You’ll find a full list of these templates in the support article Using the Brine Family. At the time of writing, these are Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template (sites built using the site builder), Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln (discontinued), Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav and West.

SF DigitalBrine-family, CSS