Munching the Squarespace Hamburger

Many Squarespace templates indicate mobile menus by the so-called hamburger icon. It's the three-bar icon in the upper-left corner of Figures 1. Use of the hamburger is controversial; some believe it unintuitive; some prefer a button labeled "Menu". Templates like Five and Marquee make it easy to substitute a menu button like you see in Figure 2.

------------
Figure 1. The Five template used by the Seventh-day Adventist congregation in Munising, MI has the hamburger icon at the upper left.

------------
Figure 2. The template's design makes it easy to substitute a menu button via custom CSS, thereby improving the clarity of the navigation.

The Empty Element Method

Five and Marquee are two templates generating the hamburger icon through an approach I term as the Empty Element Method. If you're a Five user for example, you can bring up a page in your site and view its HTML source to find the following tag that is empty:

<span id="mobile-navigation-label"></span>

The hamburger icon seen from a phone or a tablet is supplied through a CSS rule such as the following, again from Five. I've elided some of the declarations to focus on the two that combine to generate the icon.

#mobile-navigation-label:before {
  font-family:'squarespace-ui-font';
  ...
  content:"\e030";
}

The rule adds a single character prior to the contents of the targeted span element. The content declaration specifies the character as code point E030, corresponding to the hamburger icon in the particular font created by Squarespace to hold user-interface symbols.

The Benefit

Bizarre as it seems, the Empty Element Method is a benefit by enabling you to write custom CSS rules to specify any character or string that you desire. For example, you can achieve the blue-button effect in Figure 2 by adding the following rules to the Custom CSS Editor of any site built on the Five template:

#mobile-navigation-label:before {
  content: "Menu";
  font-family: "Open Sans";
  font-weight: bold;
  font-size: 18px;
  background-color: #3581d6;
  border-radius: 6px;
  width: 120%;
}
#mobile-navigation-title {
  margin-left: 20px;
}

The same general approach works in the Marquee and any other template implementing the Empty Element Method. Discover the empty element. Write a before rule to specify whatever content you want in place of the hamburger icon. Job done. 

Discovering the Empty Element

How do you know whether your chosen template implements the Empty Element Method? It's easy to check. Here's what to do:

  1. View your site from a browser on a laptop or desktop PC.
  2. Narrow your browser window just enough to show the mobile view.
  3. Right-click the hamburger icon and select Inspect Element.
  4. You should see a result similar to that in Figure 3.
  5. Expand the highlighted element in the left inspector pane.
  6. Look for a before rule. Click it if it's there.
  7. Scroll down the right-side pane and look for a content declaration.  

If you find a before rule having a content declaration, then your template is likely using the Empty Element Method. The highlighted element that you expand in Step 5 is the one to target. 

Figure 3. The Five template's empty element and its associated before rule. 

Figure 3. The Five template's empty element and its associated before rule. 

Changing the Content

Look carefully at the before rule in the lower-right pane of Figure 3. Find the content declaration, and scan upward until you see a selector. The template designer targeted the mobile-navigation-label element, so you should do the same:

#mobile-navigation-label:before {
...
}

Now change the font. Squarespace relies upon a font named squarespace-ui-font for various user-interface symbols such as the hamburger. You're replacing the hamburger with text, so choose a font in harmony with the rest of your site.

One approach to choosing a font is to right-click your site title, select Inspect Element, and see what font is being used. Then use the same for your navigation label. (You can inspect one of your heading fonts instead of the site title if you prefer). The site title in Figure 3 is in the Open Sans font, so add that font to the rule:

#mobile-navigation-label:before {
  font-family: "Open Sans";
  ...
}

Don't forget to specify the text to display instead of the hamburger. Do that through a content declaration:

#mobile-navigation-label:before {
  font-family: "Open Sans";
  content: "Menu";
}

Pause to save your changes and view the result, which might or might not look so good depending upon the template you're using. Figure 4 shows the result so far in the Five template.

 

------------
Figure 4. First cut at changing the hamburger icon into a menu button. New text is in place.

 

Do not be dismayed. The overlap in Figure 4 does look awful. In some templates you won't have that problem, but in Five you will have it. The font size is also not pleasing in Figure 4, and the font really ought to be made bold. Finish styling the button first. Then work on adjusting out any remaining problems.

Styling the Content

Some styling is needed to make the word "Menu" in Figure 4 appear as the Menu button in Figure 2. Following is an extension of the CSS rule with additional declarations making the text bold and changing its size. I went with 18px to be consistent with the site title size. The background color is specified as a shade of blue, and the border-radius takes the edge off the button corners.  

#mobile-navigation-label:before {
  font-family: "Open Sans";
  content: "Menu";
  font-weight: bold;
  font-size: 18px;
  background-color: #3581d6;
  border-radius: 6px;
}

Figure 5 shows the result so far. Clearly there's a problem with the button background. The blue square surprised me. I had been expecting the button to encompass the text and be rectangular.

 

------------
Figure 5. The blue menu button takes shape, but is not quite all there yet.

 

Troubleshooting the Design

Sometimes you make write custom CSS rules and everything just works as you expect and hope. Not always though, and not in the case of Figure 5. Sometimes you have to troubleshoot and resolve unexpected side-effects.

My first thought upon seeing the result in Figure 5 was that the width of the span containing the mobile navigation label was fixed. Indeed, that's the case. Inspect the navigation label again as in Figure 3, scroll up just a tad, and you'll see that its width is fixed at 32 pixels. Specify width: 120% to force the button just a bit wider than its text. Doing so adds a bit "breathing room" as a margin on either side of the button text, and you can adjust the percentage as you see fit for a pleasing result. The rule in its final form is now:

#mobile-navigation-label:before {
  font-family: "Open Sans";
  content: "Menu";
  font-weight: bold;
  font-size: 18px;
  background-color: #3581d6;
  border-radius: 6px;
  width: 120%;
}

Setting the width to 120% solved the square-button problem, giving a nicely-sized and rectangular Menu button. The one remaining issue is to "nudge" the site title a bit to the right so as not to crowd the button. Do that by adding some left margin to the mobile navigation title:

#mobile-navigation-title {
  margin-left: 20px;
}

Figure 6 shows the result, which is the same as in Figure 2. Gone is the unintuitive hamburger, and in its place is a clearly labeled button adding a delightful splash of color. 

 

Figure 6. The final result, showing a blue menu button clearly labeled as to its function. 

 

Other Templates

Keep in mind that not all templates implement the Empty Element Method. The approach in this post applies only to a subset of the available templates. Other templates -- Bedford and its spin-offs are an example -- specify the hamburger in ways that are not amenable to the same approach.

Even templates that are amenable to the approach in this post vary in their implementation. My CSS rules for the Five template won't apply to Marquee, for example. The general approach is sound. You just need to work through the details for your template of choice.


Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart