Add an arrow to the global navigation in SharePoint 2010

Sometimes it’s the small details that matters most and makes the difference. This post is about how to customize the look and feel for the global navigation, one important element in the SharePoint interface. The navigation control renders a fairly deep HTML structure with a lot of classes to keep in mind when you need to set your branding on the top of it. Recently I built an Intranet branding where the agency had the desire to include a small arrow for selected links in the navigation. This CSS do also take care of drop downs, in the case you are using that. I hope this could be useful for you if you need to include graphics, like this arrow in the global navigation.

CSS

a:focus, a:active, a:hover {outline:none}
#s4-topheader2 {
border-bottom:0px transparent solid!important
}
.s4-tn {
background-color:#000; border-bottom:#fff 1px solid;
font-family:"Trebuchet MS"
}
.menu-horizontal {
margin-left:12px; border-left:#000 1px solid;
border-right:#000 1px solid;
}
.s4-tn ul.static > li.static > .menu-item {
height:26px; line-height:26px;
border-left:transparent 1px solid;
border-right:transparent 1px solid;
padding-left:15px; padding-right:15px;
white-space:nowrap; color: #fff;
font-size:12px; font-weight:bold;
}
.s4-tn ul.root > li.static > ul.static > li.selected {
background-color:#0089C5;
}
.s4-toplinks .s4-tn a.selected {
border: 1px solid transparent; margin: 0px;
padding-left:15px; padding-right:15px;
color:#fff; line-height:16px!important;
position:relative; z-index:10; left:0px; top:5px;
background: url('/Style%20Library/Images/MenuDownArrow.png') no-repeat center 30px !important;
}
.s4-tn ul.static > li.static > a:hover {
background-image:none; background-color:#0089C5;
border-left:transparent 1px solid; border-right:#transparent 1px solid;
color:#fff!important; text-decoration:none;
}
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background {
padding-right:0px;
}
.menu-horizontal a.dynamic-children span.additional-background {
background-image:none; padding-right:0px;
}
.s4-tn ul.dynamic {
background-image:none;
border-top:0px; border-right:0;
border-bottom:1px #ccc solid; border-left:1px #ccc solid ;
margin:0px; margin-left:1px;
}
.s4-tn li.dynamic {
background-image:none;
border-top:1px #ccc solid; border-right:1px #ccc solid;
border-bottom:1px #fff solid; border-left:1px #fff solid;
}
.s4-tn li.dynamic > .menu-item {
height:16px; padding:7px 10px;
color:#333; background-color:#f7f7f7;
}
.s4-tn li.dynamic > a:hover {
color:#00557B; background-color:#fff;
}
.dynamic > li.dynamic-children > ul.dynamic {
margin-left:-2px; margin-top:0px;
}

Download the small arrow from here

I’ve written a few blog posts earlier about the global navigation. You can found the posts here.

If you have any questions about this, please feel free to contact me.

/ Christian

About these ads