Force Mobile Navigation in Squarespace 7.1 (2025 Update)
In this article, I’ll show you how you can force the mobile navigation to show all the time, even when viewing on desktop browsers in Squarespace 7.1. If you’re still using Squarespace 7.0, I have a tutorial for forcing the mobile menu on Brine templates here.
Here’s How it’s Done
Squarespace 7.1 doesn’t allow you to set the mobile breakpoint as 7.0 did. This means that you can’t define when the menu changes to the mobile hamburger style. However, we can do it with a little bit of code:
Navigate to the Custom CSS panel (Design > Custom CSS) and paste the following code:
@media screen and (max-width: 5000px) {
/* Display burger icon at all widths and align right */
.header .header-burger {
display: flex;
order: 2 !important;
}
/* Make burger menu visible at all widths */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
/* Center logo in mobile device */
.header-title {
text-align: left !important;
}
/* Hide primary navigation menu */
.header .header-title-nav-wrapper .header-nav {
display: none;
}
}
Modify the menu font size
If you’re looking to modify the menu font size from the default, add the following code:
.header-menu-nav-item {
line-height: 3em
}
@media screen and (min-width: 768px) {
.header-menu-nav-item a {
font-size: 10vmin;
}
}
If you’re looking to hide the social icons and CTA button from the header, add the following code:
.header-nav, .header-actions {
display: none;
}
It’s as easy as that.
You can modify the values to fit your own style. Let me see what you’ve done with this by pasting your own website in the comments to show me what you did with it.
Related Articles:
Learn how to turn the inset border on a Squarespace section into a blurred image frame using just 6 lines of custom CSS. Step-by-step tutorial with a code generator.
Create a vertical scrolling testimonial carousel to any Squarespace site. Includes a live code generator where you can type in your own reviews, customize colors, speed, and card styles, and copy the finished code in one click.
Uploaded a video to Squarespace but can't find a way to download it back? Here's a quick workaround to retrieve your hosted video files when the download button is missing.
Learn how to add quizes, polls, and surveys to your Squarespace website without code using Opinion Stage. A free tool to turn quizes and polls into lead generators.
Create anchor links in Squarespace 7.1 without coding! Learn to make smooth scrolling internal links for same-page navigation, links to other pages, and SEO-friendly anchor links. Get solutions for unsupported sections too.
Create a typewriter effect header with a blinking cursor on your Squarespace site using one simple code block.
Add a 'View Project' button overlay to your Squarespace portfolio thumbnails. This code snippet is an easy plug-and-play solution to enhance your Squarespace website design.
Add a collapsible floating side navigation menu to your Squarespace site with this code snippet. Keep links accessible without clutter, customize icons and colors, while being fully responsive. Follow the step-by-step guide to integrate it seamlessly.
Learn how to customize the default 'Sign up for News and Updates' text in Squarespace forms with a simple JavaScript snippet. This quick guide will help you align your forms with your brand’s tone and messaging, boosting engagement and maintaining consistency.
In this tutorial I will teach you how to add a polaroid photo effect to the Squarespace Instagram block.
![How to Change Images on Hover in Squarespace [Simple Guide]](https://images.squarespace-cdn.com/content/v1/671a6d15050267628d1bfe3a/1729955141069-JY8TZ37717WLM0T405BZ/Minimist+Web+Design+-+Squarespace+Designer+and+Developer+-+Change+Fluid+Engine+Images+on+Hover.png)
In this tutorial I will teach you how to change images on hover in Squarespace Fluid Engine and 7.1 using a very simple CSS code.
In this article I will guide you through the process of implementing the Ken Burns effect on your Squarespace images, galleries, and section banners using CSS.
When a member logs into their Member Area account, the page simply refreshes and the user panel opens. This can be confusing and not the best user experience. In today's article, I'll show you how to solve this problem by sharing a simple code snippet that you can add to your website
In today's digital landscape, websites must be designed with responsiveness in mind. As a Squarespace designer, one of the most important steps in my web design process is ensuring my websites are responsive and look amazing on all displays, be it mobile, tablet, or desktop.
Adding floating social icons that are always visible to your website is an easy way to encourage visitors to follow you on your chosen platforms and stay up to date with your content. Not only do these icons provide an easy way for visitors to connect with you, but they also contribute to the professional and cohesive look of your site. The new Fluid Engine update to Squarespace means the codes we used on 7.1 to achieve this are no longer viable and they need some tweaking.
In this article, I’ll show you how to create an anchor link sidebar navigation in Squarespace 7.1 and Fluid Engine.
In this article, I’ll show you how you can force the mobile navigation to show all the time, even when viewing on desktop browsers in Squarespace 7.1.
The Brine family of templates in Squarespace 7.0 offered a lovely, optional parallax feature that could be applied to banner images. 7.1 does not currently offer this option. However, with a little bit of code, we can add a (more flexible) version of the parallax effect to banner images in this updated design system.
There is a plethora of amazing effects that anyone familiar with CSS and/or Javascript can implement on a customized website. However, because the HTML is already written for you when you’re building with Squarespace, it can be difficult to add custom effects using a combination of HTML, CSS and Javascript, but it can actually be quite easy.
In this article, I’m going to show you how you can force the mobile navigation to show all the time, even when viewing on desktop browsers like I have on this website. It’s really quite simple!
Parallax web design effects have been growing in popularity for years. It’s a wonderful way to add visual interest you your website when done correctly.
Some time ago, I wrote an article outlining how to create slanted headers and footers. That small bit of code was then featured within the Ghost Plugins library, and I’ve since been bombarded with emails containing questions about how to add slanted sections within a Brine Index.
If you’ve spent any time building a Squarespace website, you know that it’s super easy to make a horizontal line by using a line block. But what about vertical lines?
As I gain more experience building websites on Squarespace, I continue to notice small nuances that are sometimes neat, sometimes annoying. Regardless of what it is, I often just want to change some small thing.
Squarespace made it easy for us website solopreneures to implement that annoying (but necessary) cookie banner on our own sites. I’ve only just turned it on on my own website, but was shocked to see this:
Button blocks in Squarespace are a super easy and convenient way to add a good-looking and consistently stylized button to your page. The convenience of Squarespace also comes with some limitations that sometimes make ostensibly easy tasks difficult.
Squarespace offers a tightly curated collection of templates that allow you to be your own designer and come out looking like an industry leader with a polished website, but it's easy to simply choose a template, plug in your photos and text, and end up with a website that looks exactly like the thousands of others with the same layout and styling.
One of the main concerns I've heard from clients and others thinking about using Squarespace is that they don't want their website to look and act like everyone else's site and look like a template.
Learn how to reposition your Squarespace header to the bottom of the page using a simple CSS code snippet.