CSS separator for navigation in Wordpress

Question

On my test site http://witthotel.perfectlysimple.org/about/ I'm trying to put a separator between the different nav items.

I found several suggestions on stackoverflow ( Separators For Navigation ), but none seemed to work for me somehow. Since I'm not allowed to ask more questions in the same thread, I started this one:

I started out with this solution:

.nav-header li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Unfortunately, even when I put in the full separator of the transparent gif, it wouldn't show up at all. The URL was correct though, since I tried it in a browser tab first.

Then I tried the following code:

.nav-header li + li:before{
    content: ".";
}

However, as you can see, the dot sits above the nav items. Any suggestions on how I can make it sit in between them?

Thanks.

Answer 1

Try to add this to your css style:

.nav-header li + li:before{
content: ".";
position: relative;
float: left;
top: 11px;

}