The Codebase

Browse all Resources!

Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.

All CSS tricks, 7.1, Mobile design Beatriz Caraballo All CSS tricks, 7.1, Mobile design Beatriz Caraballo

Mobile nav on demand - Header nav (7.1)

Wishing you could bring up the burger button and mobile menu on tablets in your 7.1 site? Wish no more with this handy little snippet! Copy/paste this code into your Squarespace site and you’ll be able to have the mobile nav instantly show up at the breakpoint of your choice, to either avoid frustrating issues with excess nav links on tablet-ish devices or simply create a minimal look on desktop!

Read More
All CSS tricks, Mobile design, 7.0 Beatriz Caraballo All CSS tricks, Mobile design, 7.0 Beatriz Caraballo

Custom burger button for mobile (Brine 7.0) - Header nav

If you’re looking to go the extra mile with your site’s customization and be able to use your own custom burger button in Squarespace 7.0 (Brine family), this is the snippet for you! You’ll be able to replace the native lines in no time and showcase your branded version by simply using the image’s URL.

Read More
All CSS tricks, 7.0, Tagline Beatriz Caraballo All CSS tricks, 7.0, Tagline Beatriz Caraballo

Stacked tagline under logo (Brine 7.0) - Header nav

Reorganize the way the logo and tagline display on your Squarespace 7.0 (Brine family) project with this short code. Regardless of the position of your logo + tagline within the header area, you’ll be able to adapt the snippet to make it work for your specific situation, and have the two elements stack in just a few minutes.

Read More
All CSS tricks, Background, 7.0 Beatriz Caraballo All CSS tricks, Background, 7.0 Beatriz Caraballo

Background color for top header on one page (Brine 7.0) - Header nav

If you want to add a background color to the Top Header of some pages inside your Squarespace 7.0 site (Brine family), this copy/paste code is for you. You can set any kind of color code you want for the specified pages, and have your nav stay transparent (or use a different color) on all other pages.

Read More
All CSS tricks, 7.0, Hover/overlay Beatriz Caraballo All CSS tricks, 7.0, Hover/overlay Beatriz Caraballo

Sliding lines on hover for nav links (Brine 7.0) - Header nav

Looking to add a little something to your navigation links in Squarespace (Brine 7.0)? Then grab this quick code snippet to add a simple yet interesting-looking hover effect! You’ll get two sliding lines, of the color and thickness of your choice, marking the link your user is hovering over while on desktop devices.

Read More
All CSS tricks, 7.1, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Hover/overlay Beatriz Caraballo

Sliding lines on hover for nav links (7.1) - Header nav

Looking to add a little something to your navigation links in Squarespace? Then grab this quick code snippet to add a simple yet interesting-looking hover effect! You’ll get two sliding lines, of the color and thickness of your choice, marking the link your user is hovering over while on desktop devices.

Read More