Typepad Knowledge Base: Styling the Navigation Bar with Custom CSS

Using Custom CSS, you can edit the style, format, and center the Navigation Bar links below the banner. Custom CSS is a feature available to Pro Unlimited, Pro Premium, and Business Class plans.

Default Style

Using the Theme Builder to create a custom theme, the Navigation Bar will use the same font and link style as the blog post content. With a pre-made theme, the Navigation Bar may use a special style that matches the theme, or a basic style that matches the blog post style. In either case, Custom CSS can be used to override the existing style and add extra elements to give your Navigation Bar its own unique look.

Example Navigation Bar before styling

Styling the Navigation Bar

The container class for the pagination link area is nav-list. This class can be used to add a background color or image for the whole Navigation Bar area, for example:

.nav-list { background-color: #CCCCCC; border-top: 1px solid #000000; border-bottom: 1px solid #000000; }

Styled nav-list

The background area for each Navigation Bar link uses nav-list-item. This class can be used to add a background color or image behind each link, add borders, etc. Example:

.nav-list-item { background-color: #EFEFEF; border-right: 1px solid #000000; }

Styled nav-list-item

The class used for the Navigation textual links is called nav-list-item a. This class can be used to change the font, color and link style for each link. Example:

.nav-list-item a { text-decoration: none; color: #000000; font-family: Arial, sans-serif; font-size: medium; font-weight: bold; letter-spacing: 1px; }

Styled nav-list-item a

Below is an example of all of the above classes together, as the code would appear in blogs > Design > Custom CSS.

.nav-list { background-color: #CCCCCC; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .nav-list-item { background-color: #EFEFEF; border-right: 1px solid #000000; } .nav-list-item a { text-decoration: none; color: #000000; font-family: Arial, sans-serif; font-size: medium; font-weight: bold; letter-spacing: 1px; }

Centering the Navigation Bar

To center the content included in the Navigation Bar within the container, you can use the CSS:

#nav { text-align:center; } #nav ul li.nav-list-item { float: none;} #nav ul { text-align:center; } #nav ul li { text-align:center; display:inline; } #nav li a { display: inline; }

Other Tips

There are some other tips for customizing the Navigation Bar which do not necessarily require Custom CSS: