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:


	$(".ms-topNavContainer").each(function() {

        var links = $(this).find("a");

        if (links.length > 0) {
            var link = links[0];



The CSS for “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).

One Thought on “SharePoint Top Nav Dividers

  1. Pingback: Links (9/3/2009) « Steve Pietrek – Everything SharePoint

Post Navigation

Switch to our mobile site