Pre-S. Just joining us for the Intro to Squarespace CSS series? Cool beans! Here’s where I might start before diving into the meat and potatoes of this post!

Suggested reading:

All done with your homework (*ahem* suggested reading)?

Fab! You now have some solid context for all the CSS goodness that is about to go down in this post!

Now, students of my Square Secrets Course will tell you that I’m all about learning to use Squarespace to create completely custom, nothing-like-the-template websites without having to learn to code.

(You can peep some of my student’s recent work here, btw).

That being said, I recently did a round-up on the blog of all the most useful (free!) tutorials for using CSS to style your Squarespace site’s fonts & text blocks, and let me just say…

Ya’ll seriously love yourself some CSS!

And I totes get it!

Playing around with CSS for the purposes of building this post was next-level therapeutic!

And while I don’t often reach for CSS myself (you can find my reasons for not getting too CSS-happy in this post) I’m happy knowing that there’s a solution to just about every Squarespace design quandary out there should I really want it!

So without further ado, let me introduce some uber-talented designers currently killing it in custom CSS land!

10 Squarespace CSS tutorials for your site navigation

1. How to add custom font to your navigation menu items in Squarespace using CSS

Method of CSS injection used: Universal

The lovely Beatriz over at Thiry Eight Visuals has done it again!

In this tutorial, she is showing you exactly how to take the custom fonts you’re currently drooling over (but aren’t native to Squarespace) and put them to work in your Squarespace site’s main navigation!

Oh, and excuse the total fan-girl moment, but not only does she show you the super in-depth steps to making this bit of CSS magic happen, she also gives a mini education on why CSS sometimes doesn’t work (and 2 options for fixing it!)



2. How to create vertical navigation in Squarespace 7.0 & 7.1 using CSS

Method of CSS injection used: Universal

Bringing the spotlight back to talented past student Rebecca Grace of Rebecca Grace Designs, she’s showing you how to add interest to your site navigation by making it vertical rather than horizontal like the template!

She’s helping us totally nail this custom navigation look in both Squarespace 7.0 and Squarespace 7.1.

Here’s an example to help you daydream what’s possible with this neat little CSS code snippet!



3. How to add a hamburger navigation menu (even on desktop) in Squarespace using CSS

Method of CSS injection used: Universal

Loving the super clean minimal look for your site? Swap out all those text links living in your site’s main navigation for a sleek little hamburger menu!

Squarespace’s built-in mobile responsiveness automatically collapses your menu when the screen your site is being viewed on is smaller than a certain size.

But if you’re digging the look and you want to know the secret to making the hamburger stick around (even when viewed on desktop) the brains behind Minimist are making it happen in this tutorial!

P.S. Wondering what the heck a hamburger menu is? Sadly, it has nothing to do with food…

Here’s a “taste” (see what I did there?) of what you can achieve with this CSS hack!



4. How to change the color of any main navigation menu item in Squarespace using CSS

Method of CSS injection used: Universal

Want a certain link in your navigation to really stand out?

Use a pop of color!

Maybe you just launched a new product or service you want to shout out about, or you’re finally opening the doors to your biggest sale of the year!

Whatever it is you’re trying to draw attention to, Christy Price has got you covered in this easy-peasy tutorial!

Check out how much simply changing the color of a menu item makes it really jump off the page!





5. How to add a fixed or “sticky” header in Squarespace using CSS

Method of CSS injection used: Universal

Coming to us from the absolute CSS wizard Chris Schwartz-Edmisten, this tutorial makes it so that anywhere your visitor scrolls on the page, your header (and therefore your main navigation) will follow!

Meaning there’s no having to scroll allll the way back to the top to continue their site journey!

I’m always down for anything makes it easier for people to take the action you are hoping they will on your site, so anything that keeps that “shop” or “book now” button at eye-level is def a win!

Here’s a simple header styled with CSS to be fixed to the top of the page as you scroll!



6. Add a custom back-to-top button or image in Squarespace using CSS

Method of CSS injection used: Universal & inline

Long-scrolling pages are super on-trend at the mo!

(And not just because they are pretty, or that they can fit a whole lot more useful info a visitor might need about your biz!)

The long-scrolling format mimics some of our fav binge-able apps and softwares!

Think: Pinterest & the Gram!

It’s super easy to get sucked into a site when you can just scroll and scroll through non-stop gorgeous content, so as long as it’s done well, it really is a great way to keep people on your site! (Majorrrr SEO brownie points there!)

But just like we ran into in the previous example, there’s a slight problem…when you have a long-scrolling page, your main navigation (full of all the call-to-actions responsible for turning clicks into customers) is suddenly miles away.

And you know what’s easier than scrolling all the the way back to the top?

You guessed it. Hitting that ‘X’ button.

Clunky navigation can kill a site’s vibe prettyyy dang quick, so if you want your visitor/reader to be able to jump right back up to the top of your page at a moment’s notice, a custom back-to-top button is for you!

Heather Tovey is taking us through the step-by-step tutorial you need to create and add a custom back-to-top button to your Squarespace site.

Here’s an example of what that could look like (but honestly, the little back-to-top image/button could be literally anything, so go wild!)



7. Changing footer navigation color on hover in Squarespace using CSS

Method of CSS injection used: Universal

The lovely Erika over at Big Cat Creative has been busy putting together all sorts of CSS fun!

In this tutorial, she’s helping us spice up that sometimes boring but super necessary footer navigation to further dazzle your site visitors!

Here’s a simple screenshot of that color change in action when someone mouses over the word “courses” in my mock site’s footer:



8. Remove the header & footer or site navigation from a single page in Squarespace using CSS

Method of CSS injection used: Universal

So we’ve already touched on the importance of easy-to-use site navigation (you do not want customers getting lost on or distracted on their way to that “buy” button!)

But did you know that there are certain pages it’s considered best practice to actually hide your navigation links?

Gasp!

That’s right! There is one veryyy specific instance where it 100% makes sense to take away your visitor’s site-roaming freedom…

On your landing pages!

This could be a course enrollment page, a freebie opt-in page, a donation page – basically anywhere you have one specific outcome or action you want them to take before they leave page!

(Because once your visitor bails on a page asking them to sign-up, opt-in, buy, enroll, etc. the chances of them returning is well…not great.)

You get the picture! Now let’s get our hands on the CSS!

You can find that tutorial compliments of yours truly in this post!

Here’s an example of a landing page for my Squarespace Pre-Design Workbook & Checklist where I’ve hidden my header & footer to help visitors focus on my singular goal for the page: opting in!



9. Add icons to your navigation menu in Squarespace CSS

Method of CSS injection used: UNiversal

Give it up for the Queen of CSS (and of bad puns) because Thirty Eight Visuals is sharing yet another CSS treasure!

In this tutorial, she’s teaching you how to totally up your navigation game by throwing some cute little custom-branded icons into the mix!

Nothing sets your site apart like custom graphic elements & icons created just for you!

So if this is something you’ve invested in (or you’ve managed to track down a few awesome free or paid stock icons you love) this tutorial has all the know-how you need to put them to good use!

Here’s a little look at what icons can do to really spruce up your site navigation!



10. Create a custom navigation bar for a single page in Squarespace using CSS

Method of CSS injection used: Universal

Okie dokes, so this one is definitely next-level (and not for the faint of heart or fair weather CSS’er).

But it’s so so good. I couldn’t not share.

So if you are feeling like a challenge, and you have a page in mind where you’ve been wishing you could create a custom navigation menu that is 100% unique to that page, then buckle your seatbelts…

…because this tutorial from coding genius Mary Shaffer of Inscape Web Design is. about. to. blow. your. minds.

(Scroll on down to see a sneak peak at just what’s possible when you believe!)

This is a mock blog page where I’ve used Mary’s custom CSS to add a sort of secondary navigation menu of my blog post categories!



And that does it for post #2 in the CSS round-up series! Hope you find these CSS hacks as entertaining and useful as I did!

P.S. I want to hear from you! Do you have a fav bit of CSS you use on your site? (Or when you’re designing for clients?)

Share in the comments below!


/

/

You’ll also love . . .

Squarespace CSS: 10 ways to customize your site’s navigation