• 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?

Adding Drop-down Menus to the Navigation Bar

Using the Advanced configuration for the Navigation Bar, you can add drop-down menus below your banner to link to a list of Pages or Categories.

Editing the sample code

Below is the sample code you'll need to add to the Advanced configuration field for the Navigation Bar. There are two sections of the code which need to be included. The first section of the code is the style which starts with the <style type="text/css"> tag and ends with the </style> tag. The second section of the code is where you will enter the tiles and URLs for the menus and starts with the <div id="centernav"> tag.

First, you'll need to start with the sample code below and edit it to meet your needs. Detailed information is available on editing the style and editing the menu links is available below.

Editing the Style of the Navigation Bar

Editing the style code for the menus is not necessary, but you may need to make adjustments to match the theme of your blog. Not all classes with the style can be edited, and these classes are noted as "DO NOT EDIT" within the code.

For the classes which can be edited, there are notes included next to the class. For instance, you can include different color codes for the background when you hover over the links. We would recommend you start with the basic code provided on your blog, then make adjustments to the code as necessary to fit the style of your blog's theme.

Editing the Links included in the Navigation Bar

The sample code includes 4 tabs with 3 drop down menus. You can add more menus and links as needed. The # symbols need to be replaced with the URLs for the pages you are linking. For example, if you would like to place a link to your Categories in the second menu, you would start with sample code for "Menu Item 2":

<li id="main">
            <a href="#">Menu Item 2</a>
                <ul id="subnav">
                      <li><a href="#">sub menu item 1</a></li>
                      <li><a href="#">sub menu item 2</a></li>
                      <li><a href="#">sub menu item 3</a></li>
                      <li><a href="#">sub menu item 4</a></li>
                </ul>            
            </li>

Then, you can edit the code to link to your categories similar to:

<li id="main">
            <a href="http://everything.typepad.com/blog/archives.html">Categories</a>
                <ul id="subnav">
                      <li><a href="http://everything.typepad.com/blog/ads/">Ads</a></li>
                      <li><a href="http://everything.typepad.com/blog/announcements/">Announcements</a></li>
                      <li><a href="http://everything.typepad.com/blog/best-of-the-bloggers/">Best of the Bloggers</a></li>
                      <li><a href="http://everything.typepad.com/blog/contest/">Contests</a></li>
                      <li><a href="http://everything.typepad.com/blog/features/">Features</a></li>
                      <li><a href="http://everything.typepad.com/blog/podcast/">Podcasts</a></li>
                      <li><a href="http://everything.typepad.com/blog/tips_and_tricks/">Tips and Tricks</a></li>
                </ul>            
            </li>
Knowledge Base Search

Search

Everything Typepad
The latest tips & news from the team

  • Typepad
  • Help Center
  • Privacy Policy
  • Terms of Service
  • Copyrights
Top