Border Lines

Underscore hovers are a fun way to add color and dynamism to your Squarespace site. Just a line or two of CSS are all you need to spice up your site's menu with an underscore hover effect that tracks the cursor and engages the viewer's attention as s/he sweeps across your available menu items.

An Example in the Native Template

Figure 1 shows an example in the Native template. The example is generated with default settings that are straight from creating a new site. There's no hover effect yet. My cursor is on the middle menu item, and the only visual indication is a slight "dimming" of that item.

Figure 1. Default menu links in the Native template

Let's add some flair to the menu. Menu items in Squarespace are typically written as items in unnumbered lists. Each list item is a menu link, so we can begin thinking about a rule like the following:

ul li a:hover{
  border-bottom: 4px dotted #FFE5FF;
  padding-bottom: 1.0em;
}

We aren't "there" yet though. We need to limit the rule to just the site's menu. As it's written now, the rule affects each and every unnumbered list across the entire site. We need to limit the scope.

Limiting the Rule to the Menu

Getting familiar with your browser's inspector is the secret here. Right-click on a menu item and select Inspect from the fly-out menu. Doing so in my Native template example gives the result in Figure 2. See the "Center Stage" menu text in the grey-highlight line dead-center in the inspector? That highlighted element corresponds to the menu item I right-clicked.

Figure 2. Finding the menu's enclosing div or nav element

Now look at where my mouse pointer in Figure 2 is pointing. I've scanned backward up the page's hierarchy to find a div element named navBlock. It's the outermost enclosing element that is specific to the site menu. That navBlock element is a good target to use in limiting the scope of our rule, which we can now finish writing as:

#navBlock ul li a:hover{
  border-bottom: 4px dotted #FFE5FF;
  padding-bottom: 1.0em;
}

Our rule calls for a somewhat pinkish-tinted dotted line to appear underneath each menu item as the user hovers over it. That dotted line will be four pixels thick from top to bottom. The padding of 1.0em leaves a fairly big gap between the dotted-line and the text. You can adjust spacing and color and other parameters to suit your own needs and color scheme.

When the Dotted Line is Too Long

Figure 3 shows the effect from our rule. And we're not done yet either, because the dotted line extends left and right beyond the menu item's text. I rather like that effect, but you might not.

Figure 3. The hover effect extending left and right beyond the text

Figure 4 shows the source of the extended underscores. It's the CSS box model at work. Borders around HTML elements sit between padding and margin. The left and right padding values are non-zero, so the bottom border extends left and right underneath the padding.

Figure 4. Left and right padding are the source of the extended underscore

The Native template happens to use padding to generate the spacing between menu links. We can transfer that spacing from padding to margin with this rule:

#navBlock ul li a {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 10.4px;
  margin-right: 10.4px;
}

Figure 4 shows padding of 10.4px on either side. We've zeroed that padding using !important to override the values from the template. Then we've specified those same values as margin settings. Margin lies outside the CSS border effect, so spacing between menu items remains the same while the bottom border no longer spills over into that space.

Preserving the Design Intent

You may want to examine the original rules at play. The Computed tab shows the effects from those rules, whereas the Style tab shows the rules and their values as originally written. Figure 5 shows that the padding of 10.4 pixels is computed from the originally-written specification of 0.8 ems. Look carefully just to the right of where my text cursor is hovering in the Style tab. You'll see the value 0.8em as originally written by the template's designer.

Figure 5. Look in the Style tab to find 0.8em as the source for the 10.4px of padding

It's a nice touch to stick with em units for padding as the template designer originally had in mind. That way we can change font size and have our menu item spacing respond in kind. Our complete set of rules then becomes as follows. First is a rule to add an underscore on hover. Next is a rule to translate the inter-item spacing from padding into margin.

#navBlock ul li a:hover{
  border-bottom: 4px dotted #FFE5FF;
  padding-bottom: 1.0em;
}

#navBlock ul li a {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0.8em;
  margin-right: 0.8em;
}

The margin settings of 0.8em will translate into 10.4px spacing when using the Native template's default font size for menu items. The use of em-units ensures that any changes we may make to menu item font sizes are reflected in greater or lesser spacing between items.

The Final Result

Figure 6 shows our final result. The dotted line no longer extends beyond the menu-item text, and the spacing between menu items is preserved.

Figure 6. The underscore on hover now aligns with the text above it

My example in this post is built on the Native template. The most likely difference with other templates will be the element or class name that you use in identifying the enclosing div element when limiting the scope of your rule to the menu. And that enclosing div might turn out to be a nav if the template was written using the newer, HTML5 semantic elements.

Use of border elements and padding in hover effects gives a great deal of control over color and line thickness and spacing. You can have the hover effect at the top of each menu item if you like. And you aren't limited to border lines either. You can write hover effects to increase type size, change font color, and generally involving any CSS property that strikes your fancy.


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