Customize Your Squarespace Site with Simple CSS Tricks: Part 3

 
Customizing Squarespace With CSS Part 3 → click through for the full post!

Way back in spring of 2016 I shared a mini series about CSS + Squarespace. I’ve learned SO MUCH since then so I’m bringing it back!!

Today I’ll be showing you how to use CSS to:

  • Customize an accordion menu to open up with the click of an image (see an example here)

  • Mix fonts without changing the header/body style

  • Make your navigation stick to the top of the page as you scroll down (this is a favorite lil UX feature of mine)

  • Add extra headers for more font styling (h4)

  • Eliminate hyphenated words on mobile sites

Let's get this party started 🎉


Customize an accordion menu to open up with the click of an image:

Okay this isn't CSS but it's an amazing trick you can do with a little bit of Javascript + Markdown.

In part 2 of this CSS series I shared Meagan of Forth and Create's tutorial on creating an accordion menu. I was so happy to have found Meagan’s tutorial and have put it to A LOT of use since discovering it.

Eventually I wound up with a project that needed this feature using an image instead of text (you can see the project in the recording above) and I haven’t looked back since!


Here’s how to do it:

01. Make sure this code is pasted into your site wide code injection (Settings > Advanced > Code Injection):

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


02. Now head to the page that you’ll be using this feature on, and paste this code into the Header Injection (Page Settings > Advanced):

<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h2').css('cursor','pointer');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});
})
;</script>


03. Then we’ll add in the code to create the image accordion. Add a markdown block on your page and paste the following code into it:

## <img src="/s/IMAGE-FILENAME-HERE.jpg">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • To add your image: click the link icon inside of the markdown box, select "files" from the pop up then upload the image you’ll be using. Copy the filename only (including the extension) and paste it into the part that says “IMAGE-FILENAME-HERE.jpg” then you can delete the rest of the image file text (including the [][1] text).
  • Replace the lorem ipsum text with your own text.
  • Save + repeat as needed.
  • You’ll need to refresh your page then open up full page view immediately after it refreshes to see how it works for you. (For some reason it doesn’t register with the page until you refresh it, and it doesn’t work unless you’re in full page view).

Mix fonts without changing the header or body style:

This is a great way to add a little flair to your website copy and it can really make your site feel more custom.

You achieve this effect by formatting the text you want to change to bold, then using CSS to change any bold text to a new font. **NOTE: this code will make the bold effect happen site-wide.**

Here’s the code:

b, strong {
   font-family: 'Pathway Gothic One', sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: .8em;
   letter-spacing: .2em;
   text-transform: uppercase;
   line-height: .7em;
}

You’ll customize everything in pink to your preferences. If you aren’t sure how to do this, check out this page from w3 schools (one of my favorite CSS resources) for a breakdown of how to style fonts with CSS.

If you need some ideas for mixing fonts, I think it’s super fun to pair:

  • A serif and sans serif font

  • An attention-grabbing headline font in all caps with your regular body font

  • Or even a big fat juicy font with a regular weighted font (just make sure it's not too thin)

Keep in mind that any fonts that look similar to each other won’t feel as interesting or cool. Check out this post for some great examples of how to mix fonts on your website.


Create a sticky navigation:

Notice how both of the sites from above keep the navigation in view as you scroll down the page?

This is a super easy customization and it’s one of my favorites since having the navigation follow you down the page means your visitors can quickly access any other page of your site at all times (and we always want to make your site experience as easy and convenient as possible for your site visitors).

Head into the Custom CSS section and paste in this code, then you’re all set:

header {
   z-index: 1000;
   position: fixed;
   width: 100%;
}

Add extra headers for more font styling options(h4):


I don’t recommend doing this just for the purpose of having one more font on your site, but rather to add variation to the fonts already being used.

add h4 to your squarespace site using CSS

We don't want to overwhelm or confuse your site readers, so as always I still recommend only using 2 fonts for your entire website and using extra headers to add style variation.

You can see in the example above that there are only 2 fonts used between the 4 headlines, and h4 is the exact same as h1 but in a different color.

Here’s the CSS code:

h4 {
   font-family: 'Pathway Gothic One', sans-serif;
   font-weight: 400;
   font-style: normal;
   font-size: .8em;
   letter-spacing: .2em;
   text-transform: uppercase;
   line-height: .7em;
}

To add in h4 on a page you’ll need to make use of Squarespace’s code block, as the new headline 4 won’t show up in the text editor. It’s super easy though: just add in a code block, type in <h4> YOUR HEADLINE TEXT HERE </h4> then type in the rest of your text.

* If you want it to be centered make sure you include the <center> </center> tags
* You can do this with h5 + h6 too


Eliminate hyphenated words on mobile:

How to fix words hyphenating on Squarespace mobile site


I recently ran into this issue with a new website I just helped launch. My client has this cute hashtag that they use to promote their business but it's a little long. It looked great on desktop view but caused an awkward line break on mobile (and was a problem for us in a few other areas on her site, too). 

However it was a super easy fix with a little bit of CSS:

p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;  
}

Items in pink are the “selectors”, so this is what the code following it will affect. The one’s we’re targeting with this code are normal body text (“p”) and all the normal headers (h1, h2, h3). If you use blockquotes you’ll need to add that in and if you code in extra headers (h4) you’ll need to include those in the selectors too.

If you look at the screenshots below you'll see that after implementing the no-hyphen code we ran into a new problem: the long hashtag extended off the page.

Use CSS to fix hyphenated words on mobile sites in Squarespace

To fix this I simply went into the Style Editor and reduced the font size. This was the client's h1 text so it still needed to be bigger than the other headlines, but that was an easy fix. Make sure to take advantage of the style editors mobile/ipad view (which will show up at the top of the page if you hover over the little arrow).


I hope these CSS tricks were helpful! It really is amazing how much more customized a site can feel with a little ✨ CSS magic ✨

I'd love to take a crack at any special requests so be sure to leave them in the comments below, and check back next week for 5 more of my favorite CSS tricks!