Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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, 10: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, 09:56 PM
lmilesw's Avatar
10,176 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, 03: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, 06: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, 06:32 AM
juggledad's Avatar
23,765 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, 06: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, 07: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 07:19 AM.
Old Mar 24, 2011, 05: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, 05:01 AM
50 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 05: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 08:01 AM
Vertical line spacing between link items in a sidebar pages widget kippiper Sidebars & Widgets 0 Jan 6, 2010 07:47 PM
[SOLVED] Page Menu Bar - Strange Space Occurring Between Menu Items NealSchaffer Page & Category Menu Bars 2 Jun 20, 2009 11:18 AM

All times are GMT -6. The time now is 01:59 PM.

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