Center a Squarespace Search Block On on Your Website

When I was designing the Squareverse website, I knew I wanted to provide a way for visitors to search for articles. Adding the search feature was the easy part as there is a simple Search Block you can add to your Squarespace website. The challenging aspect of adding the Search Block was determining where I was going to put it.

Early on in the design process I knew that I did not want to create a traditional sidebar common to many blog websites. I would have a sidebar on select pages of the site, but not on article pages. This meant making hard choices about how to include a search feature on the article pages, which left me with two options I was considering for placing the search feature on my site:

  1. create a new page within my main navigation that only has a Search Block on the page, or
  2. add a Search Block to the site footer.

Creating a page dedicated to search would be a great option, but the Search Block’s search field is actually a button that when clicked (or tapped on mobile devices) displays a full-window search experience. This kind of makes having a page dedicated to search unnecessary.

I liked adding the Search Block to the footer of article pages, but I didn't like the idea of a centered Search Block being on non-article pages of the site like my book page or contact page.

Fortunately, the Squarespace template I'm using has a second footer that displays at the bottom of all blog pages above the site footer. However, my centered, minimalist layout for articles dictated that the search field be centered, but the Search Block and the default styling of my template doesn’t center the search field within the width of the area of the page you are adding the Search Block.

This is when a little bit of CSS code can help center the search field and you won’t believe how simple it is to do this.

Styling the Search Field

The search field is actually not a form field element. It’s a span element styled with a border and magnifying glass icon to look like a search field you can type in. The following is an example of the HTML code the Search Block generates.

<div class="search-block">
<div>
<div>
<span class="title">Search</span>
</div>
</div>
</div>

To keep the preceding code clean and easy to read for the purposes of this article, I’ve removed certain parts of the code Squarespace adds to your site to easily help illustrate how we can center the Search Block on your site.

The span is already set to display as a block-level element so getting it to align in the center only requires setting the left and right margin to auto.

.search-block .title {
margin: 0 auto;
}

For CSS newbies, I’ve written the above CSS margin declaration in it’s truncated form. The 0 sets both the top and bottom margins to zero, and the auto sets the left and right margins to auto.

Conclusion

That’s it. Centering a Search Block’s search field is relatively simple and only requires a little bit of CSS code. Use the article comments to ask any questions or share your implementation of this code on your website.

Share

Kris Black

Kris Black is a user experience designer & developer building websites and mobile apps at truematter. Kris is also a partner at black&hue, specializing in building websites on Squarespace for small businesses, creative professionals, and entrepreneurs.

Learn more about Kris at his website.