Add Sidebar to Blog, Product, and Event Pages | Squarespace 7.1

What does this code do?

This code snippet will move two sections beside each other so that you can create a sidebar on blog, product, and event pages.

Design the Sections

This code assumes you have at least 4 sections on your blog, product, and event pages. Design these sections as follows.

1. The first section is an introduction or a title. I usually put a search bar in the introduction as well. This section will go full width across the screen.

2. The second section will be your sidebar. Note that you can have the option of hiding or stacking this section when on tablet and mobile.

3. The third section will contain your blog posts, products, or events.

4. The fourth section and beyond, is your footer or other sections. Note that the sidebar will not affect these sections and they will be full width across the screen.

Code Snippets

Copy and paste this code into Design > Custom CSS

@media only screen and (min-width: 800px) {
  #COLLECTIONID {
    #page .sections {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100vw;
    }

    #page .page-section:first-child {
      width: 100vw;
    }

    #page .page-section:nth-of-type(2) {
      width: 25vw;
      margin-right: 0vw !important;
      align-items: flex-start;
    }

    #page .page-section:nth-of-type(3) {
      width: 75vw;
      margin-left: 0vw !important;
      align-items: flex-start;
    }

    #page .page-section:nth-of-type(n + 4) {
      width: 100vw;
    }
  }
}

If you would like to hide the second section when on tablet and mobile instead of stacking it, paste the following code in Design > Custom CSS.

@media only screen and (max-width: 800px) {
  #COLLECTIONID #page .page-section:nth-of-type(2) {
    display: none;
  }
}

How To Use It

1. Design the sections as described above.

2. Copy and paste the code as indicated above.