Hello all,
The navigation bar looks like this
HOME LOGIN ABOUT
Based on suggestion on this topic: http://stackoverflow.com/questions/3570480/css-how-to-add-dot-between-navigation-title
I add the following css rule to append a * to the front of each item.
.twoColFixRt #nav-primary .nav li.libar:before {
content:'*';
}
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab" id="nav-home">
<a href="#"><span>HOME</span></a>
</li>
...
</ul>
</div>
</div>
Now the navigation bar looks like this
HOME * ABOUT
LOGIN
As you can see, the inserted * pushes the item below.
How to fix this issue?
Here is the complete html file for testing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edit My Profile | LinkedIn</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style TYPE="text/css">
#header {
margin-bottom:15px;
}
#header, #body, #footer {
clear:both;
margin:0 auto;
max-width:95%;
min-width:980px;
width:98em;
}
body {
background-color:#FFFFFF;
}
body {
border:0 none;
color:#000000;
font:62.5%/1.2 Arial,Helvetica,"Nimbus Sans L",sans-serif;
margin:0;
outline:0 none;
padding:0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0 none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}
#nav-utility {
margin:5px 8px;
position:relative;
text-align:right;
}
#nav-utility p {
color:#666666;
font-size:110%;
padding-right:2px;
text-decoration: none;
}
#nav-utility a {
color: #666666;
}
#nav-utility ul, #nav-utility li, #nav-utility p {
display:inline;
}
#header {
width: 970px;
margin-left: auto ;
margin-right: auto ;
}
#header ul, #header li, #header p, #header fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-utility li {
color:#666666;
font-size:110%;
padding-right:2px;
}
ol, ul {
list-style:none outside none;
}
#nav-utility ul, #nav-utility li, #nav-utility p {
display:inline;
}
#header ul, #header li, #header p, #header fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-add-connections a {
color:#006600;
}
strong {
font-weight:bold;
}
#nav-utility li:last-child {
padding-right:0;
}
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
#nav-primary .wrapper {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
height:39px;
padding:0 5px;
}
#logo-linkedin {
float:left;
margin:8px 10px 0 4px;
position:relative;
}
#logo-linkedin h1 a {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 0 transparent;
display:block;
height:23px;
text-indent:-12345px;
width:88px;
}
a {
color:#006699;
outline:medium none;
text-decoration:none;
}
a:hover {
text-deoration: underline
}
#nav-primary ul, #nav-primary li, #nav-primary p, #nav-primary fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-primary .nav li.tab {
float:left;
font-size:130%;
font-weight:bold;
line-height:36px;
margin:1px 0 0;
}
#nav-primary .nav a, #nav-primary .nav a:visited, #header #nav-primary .nav li li a, #header #nav-primary .nav li li a:visited {
color:#006699;
text-decoration:none;
}
#nav-primary .nav a span {
display:block;
padding:0 10px;
font-size: 15px;
}
#nav-primary .nav li.libar:before {
content:'*';
}
</style>
</head>
<body>
<div class="member" id="header">
<div class="wrapper">
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab libar" id="nav-primary-home">
<a href="/home?trk=hb_tab_home"><span>Home</span></a>
</li>
<li class="tab libar" id="nav-primary-profile">
<a href="/myprofile?trk=hb_tab_pro"><span>Profile</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you