How To Create A Fixed Mobile Header in Squarespace 7.1

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

You can use the settings built right into Squaresapce to make sure the header of your website is always visible at the top of the browser window.

→ Check out this tutorial to learn how: How to create a fixed header in Squarespace

But what if you only want that to happen on the mobile version of your website?!

For that, you’ll need the CSS from this tutorial!

Check out the video to see how to install the codes below on your own Squarespace site.

---

Here is the main code from this tutorial:

@media only screen and (max-width: 640px){
.header {
position: fixed!important;
z-index: 99!important
}
}

Want to add a border? Try this code:

@media only screen and (max-width: 640px){
.header {
position: fixed!important;
z-index: 99!important;
border-top: 1px solid #000
}
}

Want to add a box shadow? Modify this code:

@media only screen and (max-width: 640px){
.header {
position: fixed!important;
z-index: 99!important;
box-shadow: 0 -5px 15px #333
}
}