Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Vertical dash | between page menu items

Old Dec 3, 2010, 09:15 AM
60 posts · Feb 2010
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!
Old Dec 3, 2010, 08:56 PM
lmilesw's Avatar
10,174 posts · Jul 2009
Central New York State USA
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.
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
Old Dec 5, 2010, 02:46 AM
60 posts · Feb 2010
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?
Old Dec 5, 2010, 05:29 AM
60 posts · Feb 2010
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....
Old Dec 5, 2010, 05:32 AM
juggledad's Avatar
23,616 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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'
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old Dec 5, 2010, 05:56 AM
60 posts · Feb 2010
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?
Old Dec 5, 2010, 06:15 AM
60 posts · Feb 2010
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

Last edited by marced; Dec 5, 2010 at 06:19 AM.
Old Mar 24, 2011, 04:24 PM
8 posts · Mar 2011
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..
Old Mar 20, 2013, 04:01 AM
48 posts · Mar 2010
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.

Last edited by capelady; Mar 20, 2013 at 04:07 AM.


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Page menu drop down horizontal instead of vertical marineceo Page & Category Menu Bars 2 Jan 29, 2013 07:01 AM
Vertical line spacing between link items in a sidebar pages widget kippiper Sidebars & Widgets 0 Jan 6, 2010 06:47 PM
[SOLVED] Page Menu Bar - Strange Space Occurring Between Menu Items NealSchaffer Page & Category Menu Bars 2 Jun 20, 2009 10:18 AM

All times are GMT -6. The time now is 09:18 PM.

Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.