By default, your dropdowns in your header navigation aren’t clickable, with just a little bit of code though, we can change that.

Recently, I got a new headshot. Except it’s not me; it’s an AI rendering of me.

Showcase your services or pricing with this interactive and elegant pricing section.

Let people register for your events faster by adding an additional button to your Event Summaries page.

Keep open & fix your course sidenav to the side of your page with this professional course layout.

Replace your site title on a specific page to highlight a different brand or membership area.

Use a different logo that with specific color themes so that it’s more visible.

Replace your site logo on a specific page to highlight a different brand or membership area.

Create a longer cross-fade transition on your simple or full-width gallery section in Squarespace. And yup, it works in Firefox.

Add a caption to your background images that are placed perfectly in the bottom right of your sections.

Learn how to create custom triggers to open a lightbox form.

Conditionally display the Cart icon in your header depending on whether or not you have items in the cart.

Create a scrollable text block for transcripts or other long-form text content. Great for podcasts and Youtube videos.

A floating “quick escape” button that lets victims of domestic violence more safely access resources for escaping abusive situations.

Choose from 6 different CSS customizations to add an overlay on top of your list section items. Use gradients, multiple colors, or add a hover effect.

The joy of starting any new venture or learning a new skill can quickly turn into fear. Fear of not being good enough. Fear of being an imposter.

Choose from 3 different code snippets to add a background image, GIF, or video to the mobile overlay menu in Squarespace.

In this series, we’ll explore two different setups for adding icons to the links in your main nav. The first will be a CSS-only setup, but it comes with the caveat that it’s not very flexible with different color themes. The next is my preferred method, which is the javascript setup. With this setup, I inject SVG icons into the header which are much more dynamic with different color themes.

This code snippet should be in everyone’s code snippet library. It allows you to show one section on mobile and a different one on desktop. This is great for fine-tuning page sections for specific screen sizes.

Let’s build a read more component with no javascript whatsoever.