• Website Builder
  • Theme Store
    • Theme Installation
  • Build It For Me

Support


FAQ & SEARCH


Beginner's Guide
Text & Images
Video & Audio
Pages
Title & Header Images
Create A Blog
Forms & Surveys
HTML / CSS & Widgets
Picture

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. 
Navigation Font Colors
Scroll through the code until you find the section labeled as Navigation.
Navigation Font Colors
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.

Navigation Font Colors
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: 
Navigation Font Colors
Now let's change the font size, color and text-decoration.
Navigation Font Colors
Changing the color to #77c3e7 (a shade of blue), the decoration to underline and the size to 17px makes the navigation look like this:
Navigation Font Colors
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:
Navigation Font Colors
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! 

  • Website Builder
  • Theme Store
    • Theme Installation
  • Build It For Me
Picture
Picture
Copyright © Easy-Editor - 2013. All Rights Reserved.

Company

About Us
Contact Us
Privacy Policy
Refund Policy
Terms of Service

Services

Website Builder
Build It For Me
Theme Store

Even More

Theme Install Instructions
Features
Request a Quote
Help
Get A Quote
Easy Editor - Support