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.

NOTE: Although custom CSS is supported by Squarespace, they don’t offer support for custom CSS. It is also stated that custom CSS can break or cause issues with templates. If you’re checking out this article, you’re probably across it already but it is something to keep in mind.

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

Affiliate Link: At MC Digitial Design, we enjoy using Squarespace for its reliability, ease of use and beautiful designs. If you are looking to start a Squarespace account, please follow the banner link below. We receive a small commission from Squarespace for sign-ups via our affiliate links, which helps us spend time putting together resources such as this tutorial! 

Share This