Move Your Squarespace Header to the Bottom of the Page

Jan 8

Written By Nabil

In this tutorial, we’ll go over how to reposition the header of your Squarespace site to the bottom of the page. This is a great way to create a minimal design on Squarespace that feels fresh and intuitive, offering a layout that works seamlessly on mobile devices while bringing a unique touch to desktop browsing.

How to Move Squarespace Header to the Bottom of the Page using CSS

Change header position to fixed
Login to your Squarespace website then initiate editing mode by clicking on 'Edit' located in the top left corner. Once in edit mode, move your cursor over the header area and select 'Edit Site Header.' A new window will appear. Here, activate the 'Fixed Position' option by using the provided toggle switch. Make sure to set the 'Fixed Header Style' to 'Basic'.
Paste the code into your CSS panel

I've crafted two versions of the code to suit different use cases: one exclusively for mobile devices, and another that's universal, impacting both desktop and mobile platforms.

Code to target only mobile devices:

Navigate to the Custom CSS panel by clicking Website > Website Tools > Custom CSS. Then, paste the following code

/*<---- Move header to bottom on mobile ----->*/

@media only screen and (max-width: 768px) {
    /* Sticky Header at the Bottom for Mobile */
    header#header {
  position: sticky!important; /* Maintain sticky positioning */
  bottom: 0; /* Stick to the bottom */
  width: 100%; /* Full width */
  z-index: 9999; /* High z-index to stay on top */
  order:2;
  
}


/* Adjustments for the mobile menu */
  
.header-menu {
 position: fixed;
  top: 0; 
  right: 0;
  left: 0;
  bottom: 0;
  height: auto;
  max-height: 100%;
  overflow-y: hidden !important;
  z-index: 1;
}

/* Move CTA Button Placement */
.header-menu-cta {
  position: sticky; 
  bottom: 25%!important; /* this will adjust the position of the CTA Button, adjust it your liking */
}
}

Code to target both desktop and mobile

Navigate to the Custom CSS panel by clicking Website > Website Tools > Custom CSS. Then, paste the following code

/*<---- Move Header to Bottom of Page ----->*/

header#header {
  position: sticky !important;
  bottom: 0; 
  width: 100%; 
  z-index: 9999; 
  order:2;
  
}


/* Adjustments for the mobile menu */
  
.header-menu {
 position: fixed;
  top: 0; 
  right: 0;
  left: 0;
  bottom: 0;
  height: auto;
  max-height: 100%;
  overflow-y: hidden !important;
  z-index: 1;
}

/* Move CTA Button Placement */
.header-menu-cta {
  position: sticky; 
  bottom: 25% !important; /* this will adjust the position of the CTA Button, adjust it your liking */
}

Why Choose a Bottom Header for Your Squarespace Site?

Positioning the header at the bottom can offer noticeable advantages. It aligns well with phone usage habits and brings a fresh style on desktops. This shift can help your site stand out online.

Mobile-Focused Approach

In the realm of mobile browsing, user comfort and accessibility are paramount. Placing the header at the bottom of the screen taps into these crucial aspects:

Thumb-Friendly Layout

Most people hold a phone in a way that places the thumb as the main tool for tapping links. Putting the menu at the bottom fits this natural movement, easing any strain and promoting comfort.

On-Screen Access

Phone screens have limited space. A menu at the bottom keeps key options in a central spot, leaving the main content open and reducing the chance of blocking what visitors want to see.

Desktop Use Cases

While the bottom header's primary advantage lies in mobile UX, it also offers a distinctive look for desktop users:

Distinct Look

Moving the header to the bottom of the page breaks away from traditional design norms, giving desktop users a fresh and modern visual experience. This can differentiate your site, making it memorable in a crowded digital landscape.

Improved Experience for Visual-Heavy Sites

For websites that are photo or visual-heavy, such as those of photographers, designers, or artists, a bottom header can significantly enhance the visual experience. It allows for an unobstructed view of images and artworks, creating a more immersive and engaging presentation of visual content. This layout can help in highlighting the aesthetic strengths of the site, making it particularly effective for portfolios and galleries.

If you enjoyed this tutorial and want to explore more creative Squarespace web design solutions, then check out the code shop below for a variety of unique and customizable code snippets.

VIEW CODE SHOP

Articles