Change Navigation Font Colors

---

Altering the font family, size and color for the text on a site is generally very simple. Go to Design > Design Options, change the defaults and you're set, as explained in the Change Fonts help article. This works wonders for the paragraph and title text (which make up nearly all the text on the site), but these settings can't be used to change the font for the site's navigation menu. There is only one way to change the navigation font and that's through the CSS of the theme. 

To make this change go to the Design tab and click the Edit HTML / CSS option there. 

Scroll through the code until you find the section labeled as Navigation.

There is a lot of code in this section, but don't worry too much about that as most of it can simply be ignored. Find a CSS ID that reads along the lines of "nav li a" or "navigation a". The key word / letter you're looking for is "a" -- a lonely letter a always refers to links in CSS and the navigation of a site is made up of nothing but links.

In the CSS code seen here, everything within the curly brackets { } is related to the Navigation Links. The key lines you may want to edit are color, text-decoration, font-size and font-family.

• Color changes the color of the nav links. 
  
• Text-Decoration allows you to bold, italicize and underline the links if you like. 
  
• Font-Size is used to increase and decrease the size of the text. 
  
• Font-Family changes the font face of the text.
  

The navigation links for this theme look like this: 

Now let's change the font size, color and text-decoration.

Changing the color to #77c3e7 (a shade of blue), the decoration to underline and the size to 17px makes the navigation look like this:

Notice that the "Welcome" page is still white despite the blue color we assigned in the CSS. 

That's because the link color can change both when it's selected and when the mouse cursor is hovered over it. These are known as the link's "active" and "hover" states. 

And these can be easily changed in the CSS as well, see:

Once you're done making changes, make sure to click the Save button in the upper right corner of the editor to save your custom theme!