Quick Guide: Working with the Vertical Side Menu

Squarespace 7.1 doesn’t offer a vertical side menu by default, so we’ve added it using custom CSS. Before you start customizing your template, it’s important to follow these steps, otherwise, moving blocks or changing layouts may cause small conflicts with the menu. Don’t worry – it’s simple, and you don’t need any technical skills :)

1. In your Squarespace editor, search for "Custom CSS" and open it.

Screenshot of a website editor interface with a pop-up for adding custom CSS, showing a living room with a white sofa, wooden furniture, and a window.

2. You’ll see a box with some code inside. Please don’t change anything there! The code is already set up for you. Just click inside the box and copy all of the code (Command + A for Mac, Ctrl + A for Windows).

Screenshot of a website editor showing a website called Casa Aurea, featuring interior design with a cozy living room, white sofa, wooden chair, and decorative vases. On the left, there is CSS code visible in the editor.

3. Save this copied code somewhere safe (for example, in your Notes app or a text file on your computer).

Screenshot of a note-taking app showing a CSS code snippet. The note is titled 'VERTICAL HEADER' and has timestamps. The code includes style rules for sections, pagination, and page layout, with certain lines marked as important.

4. Go back to your Squarespace editor and delete all the code in the Custom CSS box. Then click Save.

Screenshot of a website customization interface showing a photo of a cozy living room with a large window, white couch, wooden chair, and decorative shelves, with navigation links and options to save or cancel changes.

5. Refresh your page.

6. Now make all the changes you want to your template – upload your logo, set up menu items and pages, replace text, and adjust content.

7. Once you’re happy with your changes, go back to Custom CSS and paste back the code you saved earlier. Click Save and refresh your page. Done!

Screenshot of a webpage with a design for an interior studio. The right side shows a cozy living room with a beige couch, wooden chair, coffee table, vases, and side table. The left side features custom CSS code with a navigation menu and text about CSS customization.

If you have any questions or need help, feel free to contact me anytime at: hello@thesoftvoice.com ❤️