How to change the background of a menu block in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit insidethesquare.co/themes

A premium feature for business and commerce plans, the menu block is a content block type that can display text in unique layouts featuring different sections with titles, items, descriptions and prices.

This tutorial will teach you how to customize the background of that menu block, adding a solid color, gradient, and your own image.

---

Here are the codes from this tutorial. Be sure to customize the padding, colors, and image url where needed.

This code will give your menu block a solid color background:

.menu-block {
background: pink;
padding: 1rem
}

This code creates a gradient background for a menu block in Squaresapce:

.menu-block {
background: linear-gradient(to right, yellow, red);
padding: 1rem
}

This code will add a background image to your menu block:

.menu-block {
background-image: url(URL-HERE);
background-size: cover;
padding: 1rem
}