SharePoint Top Nav Dividers

In a client project I’m working on, the design calls for dividers in between each navigation link. No problem. Here’s the CSS:

.ms-topnav a { border-left-style:solid !important; border-left-color:#fff !important; border-left-width:1px !important; padding: 0 10px 0 10px; }

However, this leaves the border on the first element of the navigation, which we don’t want. There’s no way to select that element using just CSS, so JQuery to the rescue:

$(document).ready(function(){ $(".ms-topNavContainer").each(function() { var links = $(this).find("a"); if (links.length > 0) { var link = links[0]; $(link).addClass("navLast"); } }); });

The CSS for “navLast”:

a.navLast { border-left-style:none !important; }

The interesting thing here is that it has to be “a.navLast”. For some reason, “.navLast” doesn’t work. Also, you can’t use “border-left” to add the dividers. You have to use the individual styles (most likely because of the inline styles on the element).

1 comment on this post.
  1. Links (9/3/2009) « Steve Pietrek – Everything SharePoint:

    […] SharePoint Top Nav Dividers […]