How do I add vertical lines between navigation labels ?

I do not know if this is what you are asking but if you wish to add the vertical "|" in a HTML document simply use &#124 this will display the vertical pipe  that you wish to use. For a list of special characters here is a good resource for you

HTML Codes - Table of ascii characters and symbols

Or simply type the uppercase "pipe" keystroke between your links

Use CSS border-right property.

nav ul {

    margin: 0;

    padding: 0

}

nav li {

    list-style: none;

    font-size: 12px;

    float: left;

    text-align: center;

}

nav li a {

    display: block;

    text-decoration: none;

    margin-right: 0;   /* space between links */

    width: auto;   /* adjust width as needed or use auto */

    padding: 6px;

    font-weight: bold;

    line-height: 2em;

    color:#1e5799;

    border-right: 1px solid #000;

}

/**remove from last item**/

nav li:last-child a {

    border:none;

}

/**float clearing**/

nav:after {

     content: '';

     clear:left;

     display:block;

}

HTML:

<nav>

     <ul>

          <li><a href="index.html">Home</a></li>

          <li><a href="about.html">About</a></li>

          <li><a href="contact.html">Contact</a></li>

     </ul>

</nav>

Nancy O.