SharePoint Top Nav Dividers

Posted September 1st, 2009 by Eric Webb

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).