How to move the header to the bottom of the page on mobile

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

In this tutorial, you’ll learn how to use a little bit of custom CSS to change the layout of your Squarespace site, moving the header to the bottom of the page. 

The custom code you’ll need is listed below, but be sure to watch the step-by-step tutorial before you give it a try. There are a few parts of this code that you’ll probably want to change.

Before you dig in, there are THREE important things to know:

1. This tutorial is for version 7.1 and these codes will not work for an older siee built on a legacy version like 7. To learn more, visit insidethesquare.co/themes

2. This is specifically for mobile because of the way dropdown folders work on Squarespace. Using this same technique on the desktop will make it difficult to access links in any folders. Technically we can move the folder to the other side of the header bar, but interacting with it and clicking on links in that folder is not easy, so I don’t recommend this setup for that specific type of website.

3. You can change your website header design to be solid and not dynamic. Dynamic will create a transparent background that can make it hard to read the links in your navigation. To change it to solid, hop into edit mode, hover over the header until you see the edit site header button, click on that, and under the styles option, select solid.

If you’re clear on all of the above and ready to dive in, here is the step-by-step tutorial!

---

➜ To add this code to your website, click on Design and then on Custom CSS. If you already have custom code there, just add a new line and paste this new code below.

➜ To do this on a single page and not your entire site, I’d recommend installing it using the page header code injection. This tutorial will teach you how to install code on a single page in Squarespace.

---

Here are the basic codes from this tutorial:

 Be sure to change the values in bold and update or remove the border and box-shadow, so it looks perfect for your own website design.

@media only screen and (max-width: 640px) {
/* moves the header to the bottom */
.header{
position: fixed!important;
bottom:0;
top:auto;
border-top:1px solid #333; /* adds a border to the top */
box-shadow: 0px -10px 10px rgba(0,0,0,0.1) /* adds a shadow to the top */
}
/*moves everything up */
#page{
margin-top:-10vh /* if you change this value, change all four in the code */
}
#footer-sections{
bottom: 10vh
}
#page .page-section:last-of-type{
margin-bottom: 10vh
}
.header-menu-nav-list{
bottom: 10vh
}
}