Saturday, October 6, 2012

Customize SharePoint 2010 global navigation bar using CSS



I´d like to lead you back to the basic CSS classes that run the SharePoint navigation. No need to get it to complicated, the global navigation can be customized in so many ways regarding the functions as well as look & feel, and there´s not so many classes involved.






In the SharePoint2010 core css there´s only four classes for the navigation list, the menu items, hover and selected. This following css contains a most simplified customization of the global navigation, it will change the background color, hover color, selected color and make it a bit higher and more prominent.Include following classes in your css file or in master page.
/* Navigation list */
.s4-tn
{
      background-color: #FFFFF; /*Menu background colour*/
      padding: 0px;
      margin: 0px;
      font-family: 'Calibri' !important;
      font-size: 11pt !important;
      padding-left: 10px;
}

/* Global navigation */
.s4-tn li.static > .menu-item
{
      color: #5A9A18;
      white-space: nowrap;
      border: 1px solid transparent;
      padding: 4px 10px;
      line-height: 25px;
      height: 28px;
}

/* Hover */
.s4-tn li.static > a:hover
{
      background: url("/_layouts/Images/selbg.png") repeat-x left top;
      background-color: #529610;
      color: #fff;
      text-decoration: none;
}

/* Selected */
.s4-toplinks .s4-tn a.selected
{
      background: url("/_layouts/Images/selbg.png") repeat-x left top;
      background-color: #529610;
      color: #fff;
      text-decoration: none;
      border: 1px transparent solid;
      padding-right: 10px;
      padding-left: 10px;
      margin: 0px;
      border-color: #529610;
}

I Hope this help.

2 comments:

  1. Awesome pravin simple and superb !!Please most more articles on branding its really helpful

    ReplyDelete
  2. I was reading your article and it is a little confusing to me. Where do you place the code? Is it possible to have more details or screen shots with details?
    Thanks

    ReplyDelete