Add slash separator | between links in Auto-Nav like the pros!

How can I get the Auto-Nav template to put a | (line) between links? Of course, you do it with CSS (border-right), but the last item is going to have a line after it, too, unless you can specify some way that it shouldn't. With a regular UL, I would just alter the class for the last item and make the border-right 0px, but Auto-Nav uses an array, so I need some way to count up the array and figure out the last item, assign a class to it and then style it with CSS.

I followed the method given on this link toward the bottom of the thread, but it just removed my last button in the navigation:

Maybe I did it wrong somehow?

The attached image shows what I'm looking for. Notice there is no line after the last link.

1 Attachment

View Replies: View Best Answer
somenboll replied on at Permalink Best Answer Reply
The easiest way to solve your problem is to mark the FIRST li-element instead of the last (using border-left). Set up the CSS to put a line in front of all items except the first and you get the same result - if this is possible with the css code you have...

The "first" class should be inserted by default.
zoinks replied on at Permalink Reply
that would work, but it doesn't seem to be removing the border... Here's my "first" class CSS:

I tried to add the class to both the LI and the AHREF elements:

#navcontainer ul li.first {

#navcontainer ul li a.first {

And of course, I tried adding the border on the left of both the LI and A elements to coincide with those.

Weird. I took a look in the header_nav template and 'first' is definitely the name of the class. I wonder why it isn't working. I can turn everything red or remove the borders entirely, so I know my CSS is being read fine. It's just disregarding my 'first' class style... that's annoying.
zoinks replied on at Permalink Reply
Wow... okay, no idea what's going on here, but it works on all the secondary pages. Just doesn't work on Home. Now that is strange. I even deleted home and reuploaded default.php.

Is there some problem with using <?php $a = new Area('Header Nav'); $a->display($c); ?> twice in one layout? I haven't had a problem with that before.
zoinks replied on at Permalink Reply
Holy crap, what a nightmare. Not sure why but this became a mess. I had to go into Edit mode of my Home page and select "Header Menu" custom template. No idea why. Also, I have no idea why there were TWO Header Menu options. I didn't upload a second Header Menu template. I guess just because I made changes after the fact, C5 became confused somehow. Really strange.

Anyway, THANKS for the FIRST class tip!

WORKED LIKE A CHARM (after I struggled with unrelated nonsense). I have put orange dots around your answer to indicate it's the solution.
Pritam replied on at Permalink Reply
I have to achieve the same kind of separators for the auto-nav on a website I would be starting to work upon, after searching the forum, I stumbled upon this thread, especially when @zoinks was trying to achieve the same thing and @somenboll had provided with the Best answer, I struggled to follow and implement the solution provided by @somenboll but due to my inadequate knowledge in php I gave up, but here's what I was trying to do when @somenboll's tip suggested @zoinks that he mark the FIRST li-element instead of the last , but failed to understand what he meant

   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   $aBlCnt = count($aBlocks);
   $tkn = 0; 
   echo("<ul class=\"nav-header\">");
   $nh = Loader::helper('navigation');
   //this will create an array of parent cIDs 
   $selectedPathCIDs=array( $inspectC->getCollectionID() );

here's the css
#page #header #headerNav{ position: absolute; top: 14px; right: 0px; z-index:2; width:100%; overflow:visible;}
#page #header ul.nav-header{ list-style:none; margin:0px; padding:0px; width:auto; z-index:2; overflow:visible; float: right }
#page #header ul.nav-header li{float:left; padding:2px 0px; margin-left:16px; margin-bottom: 0px; color:#999; font-size:13px; margin-top:0px; border-left: 1px solid #c2c2c2; }
#page #header ul.nav-header li a,#page #header ul.nav-header li a:hover{ text-decoration:none; color:#999999 }
#page #header ul.nav-header li.nav-selected{ /*border:1px solid #bbb; */padding:2px 8px; }
#page #header ul.nav-header ul li.first{border:none;}
#page #header ul.nav-header ul li a.first{border:none;}

Another work around to achieve this i found is to use the breadcrumbs template and within the template i just changed the following in the breadcrumb.php

print ' <span class="ccm-autonav-breadcrumb-sep">&gt;</span> ';

print ' <span class="ccm-autonav-breadcrumb-sep">|</span> ';

The site that I want to implement this style of autonav is just a single level website, there aren't going to be any children pages, so I would love to hear from the c5 gurus if this would be the right approach or the one stated by @somenboll would be the preferred and if so i would also appreciate if some one could explain by what @somenboll meant by stating to mark the FIRST li-element instead of the last.