Fix Secondary Navigation's Font Size On Your Office Live Web Site

• By 
• acxede

I like to leave font settings for my web site to Office Live Small Business's default settings so that I don't have monkey around with them on each page. One problem that my web site has always had because of this is that the secondary navigation has a bigger font size than the primary navigation, as shown in Figure 1.

Figure 1: Secondary navigation links have a bigger font

Now that we have access to the default style sheet, it's easy to see why - the primary navigation font is set in pixels while the secondary navigation font is set in points.

Fortunately, it's quite easy to fix this by altering your site's style sheet. Here's how you do it

1. Activate Advanced Design Features on your web site. (Or better yet, read the entire tutorial on advanced design features.)
2. Go to Site Designer and click the Style sheet button on the Ribbon, as shown in Figure 2.

   
   Figure 2: The Style Sheet button in Site Designer

3. Check the Apply custom CSS code to my Web site checkbox.
4. Cut the following markup and paste it in the little editor, shown in Figure 3, that pops up when you click the Style button.
   
   .MSC_SecondaryNavLink, .MSC_SecondaryNavLink:hover, .MSC_SecondaryNavLink:visited, .MSC_SecondaryNavLink-On, .MSC_SecondaryNavLink-On:hover, .MSC_SecondaryNavLink-On:visited { font-size:12px;}
   
   

   
   Figure 3: Office Live's Stylesheet Editor

   If you've already added some CSS markup, as it has been in Figure 3, paste the new markup after whatever is displayed in the window.

5. Click OK. The editor pop-up window will close and you'll return to Site Designer. Notice that the font size of primary and secondary navigation links is now the same as shown in Figure 4.

   
   Figure 4: Primary and secondary noavigation links now have the same font size