Embiggening the Marquee Menu Dots

The Marquee template on the Squarespace platform is wonderful with it's colorful images and parallax scrolling on index pages. It's one of my top two favorite templates. What's not so wonderful sometimes are those tiny dots in the parallax navigation menu at the right side of the browser window. 

The tiny targets in the parallax menu can be tough to hit with a mouse pointer, and a lot of detail or the wrong color in that right-side region can make the fly-out text tough to distinguish from the underlying image. What follows are a series of CSS mods by which you can bring some zest to that menu while making it into a larger and more legible target. 

Caution! As always, be sure to take responsibility when mucking about with custom CSS rules. Invest the time to personally understand what you are doing. Reading my book will help. 

Embiggening the Dots

Figure 1 shows the parallax menu in its default appearance. The dots are small and unobtrusive. They are visible against the particular background in the image, but might be difficult to hit with a mouse pointer on days when you've over-imbibed on the coffee. 

Figure 1. Squarespace Marquee's default parallax navigation menu

An interesting aspect of the dots in Figure 1 is that each is an HTML hyperlink element -- an <a>...</a> tag sequence -- that has been filled with a black background and given a border with corners rounded to form a circle. The active link is indicated by removing the background color and allowing the circle to be transparent. 

You can change the height and width of the hyperlink elements, thereby controlling the size and shape of the dots. Write the following rules and place them in your Custom CSS Editor to change the dots into ovals and size them larger:

#parallax-nav ul li a {width:30px; height:15px;}
#parallax-nav ul li.active a {width:30px; height:15px;}

Read the selectors in these rules from right to left. The first rule targets a hyperlink (a) within a list item (li) within an unnumbered list (ul) within a div named parallax-nav. You'll need separate rules for the active and inactive links, because the active and inactive links are styled separately in the template's original CSS rule set. 

Figure 2 shows the result. Visibility is increased. The larger ovals really begin to stand out and catch your eye. They're also easier to hit and land on with a mouse pointer.

Figure 2. Squarespace Marquee's parallax menu with large, oval "dots"

The menu text is now a problem. It's no good to have it overlapping the oval dots. Also notice how increasing the height of the dots has thrown off the vertical centering of the menu labels. 

Repositioning the Text

You don't want overlapping and out-of-position text like in Figure 2. It's easy to move the text around though, and a little bit of trial and error will set things right again. 

You'll find the text of each menu label in a span of class nav-title. Move the text left and right as needed by adjusting its right margin. Move the text up and down by way of the top margin. For example:

#parallax-nav .nav-title {
  margin-right: 2.5em;
  margin-top: -8px;
}

These rules move the menu text leftward and downward. Figure 3 shows the result, and you can see how much more nicely things are looking. The menu is useable as it sits now. 

Figure 3. Squarespace Marquee's parallax menu in usable form with good spacing and centered alignment

The top margin setting deserves some explanation. It's easy enough to understand how adding some right margin moves the menu labels leftward. But negative top margin usually pulls an element upward, not downward. How does that work?

The secret to understanding the top margin setting is to realize that the default setting is margin-top: -11px. That makes -11px essentially the zero-point. Changing from -11px to -8px then has the effect of moving the text downward, which is what is needed to align the text to be horizontally centered with its corresponding dot. 

Upsizing the Text

Bigger dots demand larger text. Increasing the text size is a pretty basic CSS operation. So is making the text bold, to improve visibility if you are working against busy image backgrounds. Write the following rule to bolden the text and make it one-third again its normal size:

#parallax-nav .nav-title {
  font-weight: bold;
  font-size: 133%; 
  margin-top: -7px;
}

Figure 4 shows the result. Isn't it beautiful? The large, bold, white text really pops against the image in the background.

Figure 4. Large, bold, white text that stands out easily against a wicked-cool background image

You may have noticed in this example how I tweaked the top margin of the text just a bit, reducing the negative margin by one more pixel over what you see earlier in Figure 3. You'll be doing the same thing when applying techniques from this post. Set your dot size. Set your text size. Then apply some trial-and-error to the top- and right-margin settings to find a pleasing alignment and spacing.

Filling the Background

You can eliminate any worry of your text standing out against your images by shading the background behind the text. Fill in with a shade of orange, for example. Here's how to do that:

#parallax-nav .nav-title {
  background-color: #ff6f1a; 
  padding-right: 3px !important;
  padding-left: 6px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}

Figure 5 shows the result. The bold and white text stands out nicely, and there's no missing that bright orange background. Viewers' eyes will be right on the menu items as they scroll their mouse pointer over the navigation dots. 

Figure 5. Squarespace Marquee's parallax menu items with an orange background

The rule this time looks long and complicated, but what's happening is really very simple. First a background color is applied. Then some padding is added left and right for the sake of appearance. Feel free to adjust the padding values as desired until you get a look that you like. Mine here are from trial and error. 

Making It Shapely

Rectangles are a crude shape. Sure, the bright orange in Figure 5 gets your attention, but the squared-off corners are just not pleasing. You can improve their appearance by rounding them off. Do that by specifying a border-radius as in the following example:

#parallax-nav .nav-title {
  border-radius: 25%;
  text-align: center;
  padding-top: 3px !important;
  margin-top: -11px;
}

You can see the result in Figure 6, and it's much more pleasing to the eye than the harsh rectangle shape in Figure 5. I've again adjusted the top margin by trial and error to align the menu item with the corresponding dot. I've added some padding on top of the text because the font in use happens to place the letters high in the block. Different fonts will position letters differently, and some trial-and-error with padding and margins may be necessary to get just the right look.

Figure 6. The final result: a blazing orange background that cannot go unseen

Squarespace's Marquee template is one of my favorites. I've said that before, and I'll repeat myself. The mods in this post provide a way to dress up the Marquee design by adding a bit of flair and your own personal style to what is already a fantastic template. 


If you're using the Marquee or some other template supporting index pages, and assuming you have enjoyed this post that you have just read, then have a look at Facebooking the Squarespace Flatiron. That post goes over a subtle issue involving the images and text that Facebook displays when you post a link into a Facebook status update; the issue applies to both Flatiron and Marquee users, and there is an equally subtle solution. 


Bonus Mod #1

Thanks to my friend Rasmus Schübel for asking questions about this post and pushing me to go two steps beyond where I had first stopped. Because of him, I am able to present the following, additional modifications to change the border and background colors of the dots:

#parallax-nav ul li.active a {
  border-width: 2px; 
  border-color: #624D4E !important;
}

#parallax-nav ul li:not(.active) a {
  background-color: #97C21A !important;
}

These last two mods are especially fun. The first of them changes the color of the ring indicating the currently-chosen menu item. The second changes the fill-color of the remaining dots. Figure 7 shows the result. Look carefully to see the ring next to the "ARMY" label. The ring is there, but the color is subtle.

Figure 7. Bonus result showing green dots, with a subtle border indicating the active choice

I purposely wrote the CSS rules with selectors allowing you to target the active and inactive dots separately. The syntax of how I do that should be fairly obvious. You can of course apply a background color to both targets if you like, or you can apply a border color to both, and you can certainly change the colors to fit your own needs. The rules as written provide you many options. Enjoy! 


Bonus Mod #2

Greg Zymet pointed out that I had neglected to cover changing the color of the text. And of course! Why didn't I think of showing that the first time. Here's the magic rule:

span.nav-title {color: #00ff00 !important;}

Replace #00ff00 with whatever color number you desire.


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