Force Mobile Navigation on Squarespace Brine Templates
The question of how to use the mobile ‘hamburger’ navigation on Squarespace sites comes up a lot, and it doesn’t seem like many people have provided a concrete answer.
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. It’s really quite simple!
Here’s How it’s Done
The Brine family of templates allows you to set the mobile breakpoint. This means that you can define when the menu changes to the mobile style.
1. Change the Mobile Breakpoint
Navigate to the style editor (Design > Site Styles).
In the search bar, type “break” to find the Mobile Breakpoint style option.
If you move the slider all the way to the right, the maximum width is 1280px, but if you click on the number, you can type in whatever value you want. Click on the number and type in a huge number that’s large enough to ensure that the mobile menu shows no matter how wide your visitors’ browser is, I used 6000px. It’s not likely that anyone will have their browser stretched wider than this.
Once you do this, this the mobile menu will show.
In the style editor search bar, type “top” to find the mobile top options. Here, you can choose whether you want a fixed header, and choose the colour of the menu bar.
You can leave it like this if you want to have a fixed or non-fixed header with a colored background.
if you want to have a transparent menu bar, keep reading.
2. Make the Menu Bar Transparent
Change the ‘Top Background’ colour to whatever you want and move the transparency slider all the way to the left to make it completely transparent.
Once you do this, the menu bar will be transparent, but the space where the mobile menu sits will still show the background color of your footer.
3. Close the Mobile Menu Gap
The top of each page will have a big margin gap because normally you would want the content to start below the menu bar.
To remove this gap, we’re going to add some CSS to move up the first section of index pages, regular pages, blog pages, and store pages.
Navigate to the Custom CSS panel (Design > Custom CSS) and paste the following code:
.Index-page:first-child, .Main--page, .Main--blog-item, .Main--products-item, .Intro {
margin-top: -85px !important
}In the above example, we used -85px to move up the page content by 85 pixels. You may have to adjust this number to compensate for the size of your menu bar because it will be taller if you have a bigger logo.
4. Optional Logo Colour Modification
My website is completely black and white; black in some sections, white in other sections. However, I wanted the logo and menu icon to be visible no matter which part it’s hovering over.
To achieve this, I used a little CSS trick called ‘mix-blend-mode.’ ‘Mix-blend-mode: difference’ makes it so that the elements are the opposite color of whatever it’s on top of. If you want to achieve this as well, navigate back to the Custom CSS panel (Design > Custom CSS) and paste the following code:
.Mobile-bar--top {
mix-blend-mode: difference !important;
}This is the result:
I’d love to see what you do with this. Paste your own website in the comments to show me what you’ve done.