How to create horizontal tabs in Squarespace

Last week one of my clients asked me to implement horizontal tabs on one of the pages in her Squarespace website. I looked into this before and could not really find anything about it. 

I wasn't luckier this time either. At first.

 
 

One particular challenge is to make it look good across the different screen sizes. Given the width of a desktop, it is not that hard to fit a few tabs across the page. But on the phone, there is a lot less horizontal space which makes it harder to look neat and work well. 

 
  Example for horizontal tabs

  Example for horizontal tabs

 

I tried to find alternatives and hoped my client would like the way they looked and worked. I implemented an accordion, anchor links within the page and as a third option I just arranged all the information in one, long page. Neither solution was what my client had in mind and they also didn't really look nice or worked well on phones.

So I went back - and got lucky: For some reason I played around with a Menu Block and realised that they offer clickable items across the top to display categories like dinner or drinks.

Here is the Squarespace default example, a bit shortened. Clicking on MEALS only shows the food and clicking on DRINKS lists the beverages. That is exactly the functionality I was looking for. 



I was very excited, but now needed to change the restaurant menu to a more generic format as I wanted to display text in paragraph format. 

Looking into the structure of a menu block, I found the following: 

 

At the menu level, you can have

  • selectors on the top and

  • section titles.

A menu item consists of

  • a title in bold,

  • a description in a second line in normal font weight and

  • a price identified by a $ symbol.

Given this format, the next step was to change the restaurant menu styles so that the paragraphs looked like the rest of the website. 

I started investigating the styles and playing with adding customised CSS. CSS stands for Cascading Style Sheet and describes how HTML elements are displayed. Adding it with the correct class or ID name, enables you to change the style of the elements. 

Now let's get started. 

Setting up the Menu block

1. Insert a Menu block.

 
 

This will add a default menu to your page.

 
 

2. Hover over the menu and click Edit to open up the popup window with the options.

3. Go to the second tab Design and change the Menu Style from Classic to Simple to get one column with centred menu items, instead of three columns. 

menu-design.jpg

4. Staying in the Menu Block dialog, click on Menu on the top and start changing the content. Delete the existing restaurant menu items: Replace the headings MEALS and DRINKS with yours and add if needed. Then paste your paragraphs below their respective heading.

Important: Make sure you have got a whole line space between the paragraphs. This makes Squarespace treat each paragraph as a "menu title" and we will only have to change the style for that one element.

 
 

5. Click Apply. You should now see your paragraphs centre aligned in bold. You can already click through your tabs. The next step is to change the style of those paragraphs. 

 
 

6. Now it is time to add our custom CSS. There are two ways to add CSS to your website: 

  • Squarespace provides a special section where you can save your custom styles. Use this option if you want to apply your changes to every element of that kind in your website. In this case, all Menu Blocks will have the new format, no matter on which page. 

Go to DESIGN -> Custom CSS and enter the CSS in the field. Save your changes when you are done. 

 
  .menu-block .menu-item-title {
      text-align: left;
      font-weight: 400;
      font-size: 1em;
      line-height: 1.5em;
   }
 
  • If you need the style applied to only elements in one specific page, enter the code in the settings section of that page. This way the same elements on other pages won't be affected. Save your changes.

Go to the page Settings -> Advanced -> PAGE HEADER CODE INJECTION. Add your code to the field starting with <style> and ending with </style>. Save you changes. 

 
<style>
  .menu-block .menu-item-title {
      text-align: left;
      font-weight: 400;
      font-size: 1em;
      line-height: 1.5em;
   }
</style>
 

The styles explained

As you remember, we earlier added the line breaks after each paragraph. Because the menu block assumes a menu title after every line break, all we need to do is restyling the element menu-item-title. 

  • We change the text alignment from center to left so that the paragraphs line up on the left side of the page. 
  • By default the menu item titles are bold. We decrease the font weight to the one we normally use throughout the website. You can find your font weight in DESIGN -> Style editor. Often it is 300 or 400. 
  • A bigger font makes the menu item stand out. We decrease it to our regular font size and set it 1em.
  • To make the line height consistent with the rest of the pages, I had to set it to 1.5em. You can again check in DESIGN -> Style editor to find yours. 

This should result in something like this. Depending on your website design and preferences, you might need to play with the CSS values a bit. The result:

That's it. We have now created horizontal tabs that display text in paragraph format rather than restaurant menu items. 

More options

You can now go a step further and change the styles for the navigation selectors. In my example I added a background colour, made the actual tabs white and added a yellow bottom border to the active one. 

.menu-selector {
    background-color: #f6f6f6;
    margin: 5px 5px 0 5px;
    padding: 5px;
}

.menu-block .menu-selector label {
    color: #333;
      background-color: #fff;
    font-size: 0.9em;
}

.menu-block .menu-selector label.menu-select-labels--active {
    border-bottom: solid 2px #ffcb33;
    text-decoration: none;
}

The result: 

Once my client's website is live, I will share the link here. 


Sources

w3schools on CSS

 

Have you found other ways to create horizontal tabs in Squarespace? I am looking forward to your comments.