Pointed (And Cool) Folder Style

Look Demo

Upgrade the folder drop down with this cool style. This plugin uses css editor and works with the Brine template family.

How To Install

From your Squarespace account, go to the Custom CSS Editor. 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;
}

Customize

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.

Keep in mind that longer links may affect the position and size of the folder. Shorter links work best.

License

This plugin comes with an Unlimited Use License. View License Terms