August 09, 2011

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.

Navigation Bar before styling
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:

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:

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
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.

Centering the Navigation Bar

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

Other Tips

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


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services