How to move your website header to the bottom of the screen on mobile

mobile

Apr 8

Ever noticed how apps like Instagram and Gmail keep their navigation menus at the bottom of the screen? There's a good reason for that – it's where our thumbs naturally rest when using our phones. Your Squarespace website can be designed like that too! In this video, you'll learn how to bring this same user-friendly experience to your Squarespace website using some simple CSS.

Why Bottom Navigation Matters

With most people holding their phones with one hand, reaching the top of the screen can be awkward and uncomfortable. Moving your navigation to the bottom puts those important links right where thumbs naturally rest, making your site more accessible and user-friendly on mobile devices.

This simple change can lead to:

Improved user experience
Lower bounce rates
More page views
Better mobile conversion rates

The Solution: Easy Bottom Navigation With CSS

The best part? You don't need to create a separate mobile site or use complex plugins. With just a few lines of custom CSS, we can transform your standard Squarespace navigation into a sleek bottom bar that works perfectly on mobile devices.

Here's the step-by-step process:

To reach your custom CSS panel, click on Pages and then scroll down to the utilities, and click on Website Tools.
Select the Custom CSS option.
Click Copy Code to copy the code from this blog post.
Inside your Custom CSS panel, paste the code you just copied from this post.
Update the size values, borders, and colors until the design suits the style of your own unique site.

/* mobile header location code from insidethesquare.co */ 
@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 */;
background: #000!important;
}

/*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
}
}