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!
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!
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!)
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!
Here’s an example to help you daydream what’s possible with this neat little CSS code snippet!
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.
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!
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!
Check out how much simply changing the color of a menu item makes it really jump off the page!
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!
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!
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!)
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:
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?
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!
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!
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!
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…
(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!