Vertical dash | between page menu items
 

How can I create a page menu which is divided by | , so vertical dashes. You see this a lot. I can do it using right borders in CSS per menu-item, but then it's not right in the middle, and the right page menu-item has a right dash too what I don't want of course.

The solution I mean is like on this page http://kweekcommunicatie.nl , so menu with | in between.

Thnx for your help!

I don't think there is an easy answer for this. I just use right and left borders as I don't want to fiddle that much for what I consider a small benefit.

Ok, Thanks for your prompt reply. How do you take care of the most right menu item then, how can i eliminate the border on just one specific menu item?

Through page nr's?

It sure is like that, but then the | is also highlighted when the menu-item is highlighted (or underlined, whatever), isn't it? That shouldn't be the case....

While STB's answer would work IF you are manually building your menu, it will not work if you are using the automatic menu's that Atahualpa builds.

yes, use the page ID - if you look at the source of the page you can find the CLASS for it and then add a css rule and selector to shut off the right border for that item.

If you want to manually build your menus using the new WP menu's then you need to CUSTOMize each one by changing the 'Navigation Label'

Okay Juggledag great, thanks for the explanation!

What would you recommend, using the Atahualpa menu, or the new Wordpress menu's? Can I do at least the same as with the Atahualpa options?

Hi Juggledad,

This is what the class sais:

<li class="rMenu-expand page_item page-item-2 current_page_item">

I used this code:

div#menu1 ul#rmenu2 li.page-item-2 a{
border-right: 2px solid #000000 !important;
}

But then also the submenu's have a right border. Here my CSS knowledge starts lacking :)

the border solution is so wack because it shows up on both sides and is the full height of the menu.. someone please figure this out..

I don't know if this will help someone else in the future, but I put a small image to the left of all my menu items with this:

div#menu1 ul#rmenu2 li a {
padding: 0px 20px 0px 28px !important;
background-image: url("/wp-content/themes/atahualpa/images/flowerred16.jpg") !important;
background-repeat: no-repeat;
}

I adjusted the padding to space them the way I wanted - order is top right bottom left, so I had no padding top or bottom, but had a right padding of 20px, and a left padding of 28px

One could change the image to whatever is wanted (like a vertical bar), and play around with the padding to get the right spacing. Then, you would have to figure out the css code to reference and suppress the background image for whichever menu item you didn't want the image on, the right-most item (page-item-xx), (which I didn't have to do, since I wanted the image to the left of all the menu items) using , I think, background-image: none for that menu item only. Not sure of the correct reference to a specific menu item without trying it out.