How do I hide the header on mobile in Squarespace?

Use a media query targeting screens below 768px to hide the header on mobile. This is useful for landing pages or apps where you want a clean mobile experience with no navigation.

Keep in mind that hiding the header on mobile removes all navigation — make sure users still have a way to get around your site, like in-page links or a footer menu.

@media screen and (max-width: 767px) {
  #header {
    display: none !important;
  }

  .content-wrapper {
    padding-top: 0 !important;
  }
}