Squarespace Tutorial: Remove Annoying Bottom Bar from Brine on Mobile

In this Squarespace tutorial I show how to remove the bottom gray bar from the Brine template on mobile devices.

For some reason it still shows up even when you don’t have anything in the bottom bar, which looks really bad and covers up content on the page. Below, I show you two different ways to easily remove it: one using the style editor and one using custom css.

Remove Bottom Bar from Brine on Mobile

Custom CSS:

.Mobile-bar.Mobile-bar--bottom {
  padding: 0;
}

Don’t Want to Watch the Video? Read the Post!

What's up guys Chris Schwartz-Edmisten from schwartz-edmisten.com and today we're going to be looking at how to get rid of the little gray bar at the bottom of Brine template Squarespace websites.

Immediately when I see a website and I see this little gray bar, I know that people are using the Brine template, so today I want to show you guys how to get rid of it because it's visually annoying, it covers up the content on the screen, and it's a dead giveaway for the brine template.

There's two ways to do it: one by changing settings in the style editor, and the other is a short code snippet to drop into the Custom CSS.

Fixing it in the style editor:

The first is just to go into the style editor and go into mobile view, then click on the bottom bar. Set the background color for “MOBILE: BOTTOM” to transparent, and it visually disappears.

Now as you scroll down your page you will be able to see that content is no longer getting cut off by the little gray bar.

I think that's a fine solution the only problem with it that I can see is that it's still there, it's still covering the content, it just has a transparent background.

If somehow someone got a link that they wanted to click perfectly underneath that bar as they scrolled down, they wouldn't be able to click on it because they would actually just be clicking on the transparent bar itself.

Therefore, I also want to share a CSS solution with you guys.

Fixing it with Custom CSS:

If we right click on the element and select inspect, we're going to see that it has two classes: “Mobile-bar” and “Mobile-bar—bottom.”

The reason the bar is showing - even when you don't populate anything like your cart icon or your search icon in the bottom bar – is that it has padding of 8 pixels on the top and bottom.

All we have to do is target these classes and set the padding to zero, and the bar will disappear. Once you drop in the code from above, you will see the gray bar immediately goes away.

That is a much cleaner solution because the bar isn’t actually covering up anything on the page.

I really encourage you guys to drop this code in on your website. It will take 1 second and I think it really cleans up the layout because your content won't be covered up by that annoying little gray bar at the bottom.

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris