Squarespace – Brine Mobile Header CSS

About the Brine template

The Brine family is one of the newer Squarespace templates. Brine offers more customisation options than many other templates available via the platform. There’s quite a bit of consensus between site builders that Brine ticks many boxes when it comes to selecting a flexible option.

Creating a transparent mobile header with custom CSS

Although Brine offers some great functionality and customisation options, it does lack the option to set the mobile header bar over the top of the banner image (as you can in other themes such as Bedford). It works on the desktop version, but when you change to mobile view, you end up having to select a colour to place behind the mobile hamburger menu and logo, they sit above the banner image and not over the top. It’s not a deal breaker, but if you’re looking to keep the look consistent across all breakpoints, you will need to apply custom CSS.

It took a while hunting around various articles and forums trying to find a solution that worked, so we thought it was worth helping save some time and help out anyone else trying to find a similar setup.

We’ve put together the video below showing the steps. You also find the custom CSS to copy below the video.

/*Custom CSS Code for Brine Template – by mcdigitaldesign.com.au*/

/*Mobile Header Bar – Sit Over Banner Image*/

.Mobile-bar-branding { z-index:3 !important;}
.Mobile-bar-branding {position:absolute;}
.Mobile-bar-menu {
   z-index:3;
   padding-top: 60px;
}

.Mobile-bar {
   position:absolute;
}

/*Mobile Header Bar – Padding*/

.has-logo-image .Mobile-bar-branding {
   line-height: 0;
   padding-top: 60px;
}

/*Mobile Bottom Bar – fixed*/

.Mobile-bar–bottom {
   position: fixed !important;
}

/*Mobile Banner Content – Padding*/

@media only screen and (max-width: 1060px) {
.Intro-content {
   padding-top: 150px !Important;
   }
}