• Index
  • Typepad Status
  • Login
  • Need additional help?

Typepad Knowledge Base

Learn how to make the most of your Typepad blog. Filled with tips, tricks, and general information, Typepad's Knowledge Base will help you build a better blog.

Typepad Knowledge Base
Index Typepad Status Login Need additional help?

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:

nav-list
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
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:

  • Add Images to your Navigation Bar
  • Move Your Typepad Navbar Above the Banner
Knowledge Base Search

Search

Everything Typepad
The latest tips & news from the team

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
  • Typepad
  • Help Center
  • Privacy Policy
  • Terms of Service
  • Copyrights
Top