Removing the Header & Footer on a Mobile Squarespace Page

Removing the Header & Footer on a Mobile Squarespace Page

Create a Mobile Landing Page

If you’d like to remove the header and footer of a Squarespace page on mobile, you’ll follow steps similar to those in my post for a Linktree Alternative for Squarespace which includes code for hiding the header and footer. In this case, we’ll only need to target the mobile header and footer.

If you'd rather have me set it up for you, I'd be happy to. Book a 30 minute session with me. It'll cost less than a year of Linktree!

Hide the header and footer on mobile

Since we are making these changes on only one page, we’ll need to add our code to the Page Header Code Injection.

Click on the page settings like so:

Open page settings

Navigate to the Advanced Tab:

Advanced Tab of Page Settings

then paste in the code below and SAVE it.

<style> 
 /* remove mobile header */ 
  .Mobile-bar { 
    display: none !important;
 }
  
  /* remove mobile footer */
  @media only screen and (max-width: 640px)
  {
    .Footer-inner, .clear {
 display: none !important;
 }
   #footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom { 
 display: none !important;
 }
  .Footer-inner, .clear {
 display: none !important;
 }
   #footerBlocksTop, #footerBlocksMiddle, #footerBlocksBottom { 
 display: none !important;
 }
  }
  
.Mobile-bar.Mobile-bar--bottom {
  display: none !important;
}
 </style>

Your header and footer will be visible on desktop, but hidden on mobile.

I’ve added comments to the code to let you know what each section does. Also, this code works on a Brine family template (Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West) but YMMV with other template families.


If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your Instagram.