How do I add vertical lines between navigation labels? – menu in Twenty Ten

Are you using a child theme or a custom CSS plugin?

Add a class to the last menu item in appearance ? menus – say, “last”.
Then add a rule for that class:
`a.last {border:none;}
For spacing I’d play with the padding applied.

Hi esmi,

I’m using a child theme.

Hi webbrewers,

Please give me a little fuller example lines for:

`a.last {border:none;}

A few lines above and below perhaps.

That would help me a lot.

Thank you.

Hi Webbewers,
I try to communicate my question more fully here.
Right now, my child theme css has lines below.

#access a {
color: #000;
display: block;
line-height: 14px;
padding: 0 13px;
text-decoration: none;
border-right: 1px solid #000;

}

How do I add your

a.last{border:non;}

to it?
Or do I add it as a separate line after what I have (i.e. after ” } ” or within it?
I’m rather ignorant of php.

This is css not php……….
First add a class to the last item in appearance ? menus in the box labelled “Class”
It can be anything – for example: “last”
Then specify a different rule for that class in the stylesheet:

#access a {
your css here.....
}
#access a.last {
border:none;
}

OK, yes, this is CSS.

Right now, I have below in style.css. (twentyten child theme) (I’ll name this “set 1” for discussion’s sake):
#access a {
color: #000;
display: block;
line-height: 14px;
padding: 0 13px;
text-decoration: none;
border-right: 1px solid #000;
}

So following that, do I add the new lines below? (in the same style.css) (I name this set 2):
#access a.last {
border:none;
}

So the whole css looks like this? :
#access a {
color: #000;
display: block;
line-height: 14px;
padding: 0 13px;
text-decoration: none;
border-right: 1px solid #000;
}
#access a.last {
border:none;
}

I did that change in style.css, but nothing has changed. There’s a vertical bar after the item “CONTACT” still.

But well, you say I need to add the above first set css to the last item (“CONTCT”) in Appearance / Menu in the box labelled “Class”… instead of adding this first set to style.css? But this set need to apply to all the items, not just to the last item. So shouldn’t this set be in style.css, not in the last item of Appearance/Menu….?

And the set 2 applies only to the last item, so I put that in the last item in Appearance/Menu in the box labelled “Class”.

BUT when I hit “Save Menu” button and look at the box labelled “Class”, I found that the special symbol like # and curly brackets { and } are stripped off!

What you need is to add a class to the last item of the menu and then you apply a rule to that class in the stylesheet.
Forget the “sets” (I don’t know what those are!). The css you posted above is fine. To add the class to the last item just write the word “last” (no quotes and no tags or other characters) in the class box for the last item in the menu and save the menu.

webbrewers,
OK. I understand what you mean.
So, I added the word “last” in the class box to the last item (“CONTACT”) in the Appearance/Menu and hit “Save Menu” buttton.//

Then, I added to my css :

#access a.last {
border:none;
}

So now, my css looks like this:

#access a {
color: #000;
display: block;
line-height: 14px;
padding: 0 13px;
text-decoration: none;
border-right: 1px solid #000;
}
#access a.last {
border:none;
}

Well, nothing happened. There is still the vertical line on the right side of the last menu item “CONTACT” .
Here’s the website: https://jenny-long.com/wp/resume/

(BTW, RESUME and NEW WORK pages are in WordPress. The other pages are in plain html. When I can take out the vertical line after the menu item “CONTACT”, I’ll take out the vertical line before “HOME” and after “CONTACT” on the html pages.)

I look forward to your response.

Ah, the class gets added to the li element not the link (a).
So, replace #access a.last with
#access li.last {border:none;}

webbrewers,
Thank you for sticking with me.

I replaced:
#access a.last {border:none;}

with:
#access li.last {border:none;}

So now my css looks like this:
#access a {
color: #000;
display: block;
line-height: 14px;
padding: 0 13px;
text-decoration: none;
border-right: 1px solid #000;
}
#access li.last {border: none;}

Still there’s the vertical line on the right side of “CONTACT” on the menu. (Again, the website is: https://jenny-long.com/wp/resume/ )
I still has the word “last” in the Class box of the last link item (navigation label) “CONTACT” in the Appearance/Menu.

Any other ideas? (“CONTACT” links to html page, not WordPress page. But resume page is in WordPress. This would be OK, wouldn’t it?)

Sorry, I wasn’t looking closely enough.
You’re applying the border to the link – the a element. WordPress adds the class “last” to the li element. What I gave you removes the border from the li not the a element. Doh!!
So what we need is to remove the border from the a element that’s in an li element with a class of last. That should be this:
#access li.last a {border: none ;}

Horay!! You solved it!
Thank you soooooooooooooooooooo much, webbrewers!!
I’m very happy.

Thank goodness. Sorry it took so long.

I was just looking for a solution on this topic, except my unordered list is in The Loop. I found a great reference here which says to simply put “:last-child” at the end of the modified class. Worked like a charm. For your example, that would be:

#access li {
border-right: 1px solid #000;
}

#access li:last-child {
border: none ;
}

That’s even better because you can change the menu order and not have to remember to update the class.