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

One Thought on “SharePoint Top Nav Dividers

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

Post Navigation

Switch to our mobile site