Move Your Squarespace Header to the Bottom of the Page
A key element often overlooked in Squarespace is the ability to reposition your header from its conventional top spot to a more unconventional location at the bottom of the page. I will be sharing a simple CSS code that will achieve this effect on Squarespace.
Why Opt for a Bottom Header?
Moving the header to the bottom of your website is a strategic design choice that offers significant benefits, especially in the context of mobile user experience (UX), while also creating a unique aesthetic on desktop views.
Emphasis on Mobile UX
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 Navigation: Most mobile users navigate their devices using their thumbs. A bottom-positioned header aligns perfectly with the natural thumb movement, making it easier and more comfortable for users to navigate your site. This ergonomic placement reduces strain and enhances the overall user interaction with your mobile site.
Visibility and Accessibility: On smaller screens, screen real estate is precious. A header at the bottom ensures essential navigation elements are prominently displayed and readily accessible without obstructing content. It caters to the typical mobile user behavior of scrolling and interacting with the lower part of the screen.
Desktop Use Cases
While the bottom header's primary advantage lies in mobile UX, it also offers a distinctive look for desktop users:
Innovative Aesthetic: 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.
Step 1: Change header position to fixed
Login to your Squarespace website then initiate the 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'.
Step 2: 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; /* 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 */
}
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.
