Pointed (And Cool) Folder Style

Install Steps

Pointed (And Cool) Folder Style

Submitted by Minimist Design Works with the Brine template family

ezgif-3-e65dfdb54ff6.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Folder Pointer //

.Header-nav-folder:before {
content: '';
color: #000000;
display: block;
width: 0;
height: 0;
border-width: 0 0 15px;
border-style: solid;
border-right: solid 15px transparent;
border-left: solid 15px transparent;
position: absolute;
top: -15px;
left: 50%;
margin-left: -15px
}

// Main Folder //

.Header-nav-folder {
border-top: solid 5px #000 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 150%;
text-align: center;
align-content: center;
left: -99999 !important;
margin-left: -110px !important;
width: 220px;
z-index: 1002;
padding: 1em;
opacity: 0;
white-space: nowrap;
-webkit-transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
-ms-transform: translate3d(0, 10px, 0);
-o-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
-webkit-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-moz-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-ms-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
-o-transition: left 0s .2s linear, transform 0s .2s linear, opacity .2s ease-out;
transition: left 0s .2s ease-out, transform 0s .2s linear, opacity 0.2s ease-out;
}

// Link Spacing //

.Header-nav-folder-item {
display: block;
padding: .6em !important;
font-size: 95% !important;
}

// Hover Behavior //

.Header-nav-item--folder:hover .Header-nav-folder {
left: 50%;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: left 0s linear, transform .2s ease-out, opacity .2s ease-out;
-moz-transition: left 0s linear, transform .2s ease-out, opacity .2s ease-out;
-ms-transition: left 0s linear, transform .2s ease-out, opacity .2s ease-out;
-o-transition: left 0s linear, transform .2s ease-out, opacity .2s ease-out;
transition: left 0s linear, transform .2s ease-out, opacity .2s ease-out;
}

Step Three

To change the folder’s background color, go to the site styles settings.

You will also need to change the #000000 color value under Folder Pointer to match your site styles settings.

Save and refresh the page. 👍

Moov Labs