August 08, 2011

Configuring the Navigation Bar

The Navigation Bar feature will allow you to add content below the banner, including links to pages on your blog, ads, and images.

To configure the Navigation Bar, go to Design > Content and click the pencil icon next to the Navigation Bar module to bring up the Navigation Bar Configuration menu.

There are two options for the Navigation Bar. The Simple option will allow you to enter the Title and URL for up to ten links. The Advanced option will allow you to input your own custom HTML code or code for ads, widgets, or images.

For advanced tips using Custom CSS, see the styling the navigation bar with Custom CSS article.

Simple Navigation Bar Configuration

When you first select the Simple option, the fields will be pre-populated with some links to sections of your site. These links can be edited, replaced, or removed to suit your needs. You can add additional links by filling in a Title and URL for each, clicking Save when complete.

Navigation Bar Simple Configuration

Centering Navigation Bar with Custom CSS

The Custom CSS feature is available with Unlimited, Premium, and Business Class plans, and you can use the Custom CSS code below to center your Blog Footer.

Additional Tips for the Navigation Bar

Advanced Navigation Bar Configuration

The Advanced option will allow you to input your own HTML, CSS, and/or JavaScript code. When you first choose the Advanced option, you will see the default code which you can edit to use your own links, add additional code above or below those links (such as a banner ad), or replace the link code completely with your own HTML. This is especially useful for placing horizontal banner ads below your banner.

Navigation Bar Configuration Advanced

If you would like for your banner or other code to be centered, you can use the following:

<div style="text-align: center;">your code here</div>

Enabling & Disabling the Navigation Bar

To enable the Navigation Bar, check the box next to it at Design > Content and Save your changes at the bottom of the page. You can disable the Blog Footer by de-selecting it from the same page. The links or code you've entered will remain saved in the configuration and can be edited at any time by clicking the pencil icon.

Not quite what you are looking for? Check out these other articles:

  • For information on organizing your posts by categories, see the Categories article.
  • If you are interested in placing ads on your blog, check out the article on Advertising.
Search


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!

Typepad Services badge