Top Three Fixes for Dropdown Folders in the Brine Family on Squarespace

Let’s talk about the issue of brine folder links - there are a few things that can be incredibly frustrating in terms of design of the folder.

Brine Family Templates Overview

First - before we dive into this, let’s do the Brine Family discussion. If you are a Squarespace designer, you probably know about template families. But if you are new to SS, or haven’t discovered this yet - let’s get into Brine. It’s a template family, meaning it is the base settings for all of it’s family members. There are

Brine Template from Squarespace Help — scroll to the bottom to see the full list of the 46 that fall into the Brine family category.

Brine Dropdown Folders.png

Brine Family Folders

Ok so let’s talk folders - they are our dropdown menu’s when in the navigation, and organizational tool when in unlinked. But we are focusing on that dropdown menu here today and a few things that will help you significantly when designing these.

Problem #1 - Menu Covers Top-Nav (overlaps)

This is ok IF you have the same color in the nav section that your dropdown is as the dropdown itself. In fact, this is probably how they designed it to be, but it’s not always the best design choice to leave something without distinguishing the folder.

The issue is, that if you push it down with margin, (remember padding wouldn’t work because background color is part of the padding size of a div), then you end up with a GAP of where the link for hovering over the menu, you’ll bring your mouse down and the menu will go away. So we have to fake it. Next option you probably thought of was a border. EHH, nope. Borders will extend UP above a div.


navigation same color as folder

navigation same color as folder

slight overlap when different color

slight overlap when different color

with the fix below

with the fix below


Let’s look at the CSS fix for this - it is specifically using a top navigation here as our example. This is doing a few things. These are going to need adjusting depending on your site and the font size, navigation design etc.

 
.Header-nav-folder {
    top: 36px;}

 .Header-nav-item {
    padding: 12px 0 !important;}
  1. Header-nav-folder —> This section first, we are adjusting WHERE the dropdown starts, so this value WILL be dependent on a few factors.

  2. Header-nav-item —> Here we are adjusting the padding around the actual clickable section for the navigation. Here we are adding height to the actual “button” which allows us to have our mouse over the folder and when you move the mouse down, it then is still that “AREA”.

When adding this, first adjust your folder height, and then second then adjust the padding so it FILLS the area where your navigation is.


Our solution which is the definitive “easy” version.

Our solution which is the definitive “easy” version.

Problem #2 - The link for the folder itself (on desktop only).

Folder links. GOSH this is annoying if you are working with a client and they want a specific order of things. There are a few solutions to this. In most Squarespace templates, the folder name is clickable (very few old templates don’t have folder item links).

  1. Make your first item your generalized, or “all”. We use this solution here at SSDG because it’s easy and our folders are generalized category folders anyway.

  2. Do number one, but hide the option in your dropdown. If you didn’t want to show “all” you have the option of hiding the first item in your navigation dropdown. The concept is that you need to ADD it as the first item in your folder, but just not show it on the list. That way it still takes item #1.

.Header-nav-folder-item:first-child {
  display:none;}

—> Let’s look at this code above. It’s taking the header, navigation item in a folder, and then the FIRST child (aka first item) in the sequence of folder items and then hiding it. This would be a global solution to all the folders in the section.

.Header-nav-item.Header-nav-item--folder:nth-child(2) .Header-nav-folder-item:first-child {
  display:none;}

Ok, so you only want to apply this to ONE folder - with this we are taking the first css and adding in front of it the .Header-nav-item.Header-nav-item—folder:nth-child(2). What this does is apply this rule only to the second item in the navigation sequence. Adjust the (2) if you need to change which folder it applies to.

Last solution here - this one was a crazy coincidence, I started writing this blog post after doing a few of these solutions for the new ssdg site, and here we are a few weeks later - blog post scheduled out and someone last night needed this exact last solution here but for Bedford, so in the SSDG slack community two designers figured out the solution for Bedford instead! I love our community!!

#headerNav div:nth-child(2) {
  .subnav :nth-child(1) a {
  display: none;
}
}

Note: This is the complex version here with targeting one folder - so if you want it to be a global solution in Bedford just remove the #headerNav div:nth-child(2) { and delete the second closing bracket }. so you will end up with —> .subnav :nth-child(1) a { display: none; }


Screen Shot 2019-07-10 at 12.37.09 PM.png

Problem #3 - Too many items make everything miscellaneous.

Try the mega menu as the solution if you need a multi-column, or add in non-clickable categories to your menus and images to help break up the design and create a better more strategy-based menu system.

Mega Menu Mini Workshop
Quick View

The Five Minute Mega-Menu for Brine

Looking do fix problem number three? Our sample site for what we do in our workshop for menus is above. We add multi-columns, category labels, add in images helps a TON in your design to create better navigation dropdowns.

Add To Cart

We hope this helps you show that there are a lot of solutions for menus! You don’t have to dive into the workshop to fix some of the annoying things about menu systems. A few small css adjustments can make them stop seeming like default menus, and start feeling slick and designed for YOUR brand.