How do I add vertical lines between navigation labels ?

Report · Nov 30, 2014

This is prob a very simple solution, however I never done it before, How would I be able to add Vertical lines between navigation labels. I tried to use Photoshop and save a line to a png but I'm sure there is a proper way to this solution. As always help would be appreciated.

Home|About|Contact|

Report · Nov 30, 2014

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="about.html">About</a></li>

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

</ul>

</nav>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 30, 2014

I want the vertical line to go from top to bottom of the blue navigation bar

This is my CSS code

.Fbicon{

background:url(../images/fbicon.png);

width: 24px;

height: 24px;

float: right;

margin-top:17px;

border-right: 1px solid #fff;

}

Report · Nov 30, 2014

The css for the icon is based on the dimensions of the icon. You could make a separate "|" to match the size of the nav and position it after the fb icon.

Report · Nov 30, 2014

Height of border is determined by the font-size and padding on your list anchors - nav li a.

Try pasting this code into a new, blank document.

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

body {

margin:0;

padding:0;

}

nav {

background: navy;

width: 100%;

margin:0;

padding:0

}

nav ul {

margin: 0;

padding: 0;

}

nav li {

list-style: none;

font-size: 14px;

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: #FFF;

border-right: 1px solid #FFF;

}

/**remove from last item**/

nav li:last-child a { border: none; }

/**float clearing**/

nav:after {

content: '';

clear: left;

display: block;

}

/**on focus**/

nav li a:hover,

nav li a:active,

nav li a:focus {text-decoration:underline}

/**facebook**/

.fbicon {

float:right;

width:24px;

margin-top:17px;

}

</style>

</head>

<body>

<nav>

<ul>

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

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

</ul>

</nav>

</body>

</html>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 30, 2014

I'm doing it between the icons though , not the links.

Report · Nov 30, 2014

raiden92 wrote:

I'm doing it between the icons though , not the links.

That's not what you said in your first post. You said

Home|About|Contact|

Which is what my CSS & HTML code provides for.

If you want to put Pipes between icons, use special HTML entities.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 30, 2014

Oh yeah, that's my bad. I just realized that.

Report · Nov 30, 2014

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

Report · Nov 30, 2014

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