Branding the Sharepoint 2010 Top Navigation

IF anyone interested in doing the branding the top navigation of the sharepoint site, just start it with this link.

before branding the Top Navigation:

After branding the Top Navigation:

The above mentioned SharePoint top navigation had to support variation with the Arabic fonts. So i had issues when the top navigation turns its direction to RTL. so the solution mentioned in the below link helped me out to find the problem which made the menu to behave naughty.

http://social.msdn.microsoft.com/Forums/da-DK/sharepointcustomizationprevious/thread/7f2b6811-1d19-4a9c-a5fa-29f5be4dbe5a

the problem which i was getting is from the following style in core4.css
.menu ul.dynamic {
position: absolute;
right: -999em;
}

Had to override the style which was mentioned in the core4.css with the below entry:

.menu ul.dynamic {
position: absolute!important;
top: -999em!important;
}

refer the following link to start up the branding:

Customizing SharePoint 2010 global navigation with Css and jQuery – Part 1

apart from the branding of the top navigation had to brand the search OOB webpart. You can find the style which i used in the below css style.

before branding the search OOB webpart:

after branding the search OOB webpart:

As well as if you need to hide the breadscrumb (sitemap path navigation) of the site please add the following entry in the master page or in a content editor web part on the page. (just check the ID of the control when browsing the page).

<style type=”text/css”>

#ctl00_PlaceHolderTitleBreadcrumb_ContentMap {display=none;}

</style>

the complete style sheet:

/* Drop Down: Container Style */
.s4-tn ul.dynamic{
background-color:rgb(65, 64, 66)!important;
border:thin rgb(182, 164, 85) double !important;
border: thick #b6a455 double!important;

}
/* Drop Down: Item Padding Style */
.s4-tn li.dynamic > .menu-item{
/*padding:10px 20px 10px 20px;*/
}
/* Drop Down: Hyperlink Styles */
.s4-tn li.dynamic > a{
font-size: 9px!important;
font-weight:normal!important;
color:#b6a455!important;
border:thin rgb(182, 164, 85) double!important;
text-align:left;
}
/* Drop Down: Hyperlink Hover Style */
.s4-tn li.dynamic > a:hover{
background-color:rgb(182, 164, 85)!important;
color:rgb(65, 64, 66)!important;
border: thin rgb(65, 64, 66) double!important;
}

/*          top menu */
/* Drop Down: Hyperlink static style */
.s4-tn li.static > .menu-item {
font-size: 9px!important;
font-weight:normal!important;
color:#b6a455!important;
border:thin rgb(182, 164, 85) double !important;
background-color:rgb(65, 64, 66);
border: thick #b6a455 double!important;
}
/* Drop Down: Hyperlink static Hover Style */
.s4-tn li.static > a:hover{
background-color:rgb(182, 164, 85)!important;
color:rgb(65, 64, 66)!important;
border: thick rgb(65, 64, 66) double!important;
}
/* Drop Down: Hyperlink static Hover Style */
.s4-tn li.static > a.selected{
background-color:rgb(182, 164, 85)!important;
color:rgb(65, 64, 66)!important;
border: thick rgb(65, 64, 66) double!important;
}
/* top down menu */
.menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background
{
background-image:none!important;
}
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background, .menu-horizontal ul.dynamic span.dynamic-children span.additional-background
{
background-image:url(“/Style Library/Images/Arrow_English.gif”)!important;
}
.menu-vertical a.dynamic-children span.additional-background, .menu-vertical span.dynamic-children span.additional-background{
background-image:url(“/Style Library/Images/Arrow_English.gif”)!important;
}

/* Search Box */

.s4-search input.ms-sbplain {
width: 220px !important;
line-height: 20px !important;
height:17px!important;
background-color: #F5EFE0 !important;
border: 1px solid #D3AE81 !important;
}
.s4-search .ms-sbgo {
padding: 0;
margin: 0;
line-height: 20px;
text-align:center!important;
vertical-align:middle!important;
}
.s4-search .ms-sbgo a {
background-image: url(‘/Style Library/Images/Search_en.gif’);
background-repeat: no-repeat;
width: 120px;
height: 33px;
display: block;
text-align:center;
vertical-align:middle;
margin-left:10px;
margin-top:5px;
}
.s4-search .srch-gosearchimg {
display: none;
}
.ms-sbscopes {
display: none;
}
td.ms-sbcell{
background-color:rgb(182, 164, 85)!important;
border:0px;
text-align:center;
vertical-align:middle;
}
.ms-sbtable{
border-top-width:0px!important;
border-right-width:0px!important;
border-bottom-width:0px!important;
border-left-width:0px!important;
background-color:white!important;
border-top-style:none!important;
border-right-style:none!important;
border-bottom-style:none!important;
border-left-style:none!important;
border-bottom-color:rgb(182, 164, 85)!important;
border-top-color:rgb(182, 164, 85)!important;
border-right-color:rgb(182, 164, 85)!important;
border-left-color:rgb(182, 164, 85)!important;
}
.ms-sbLastcell{
display:none;
}
.search .ms-sbcell{
color:#4f4f4f!important;
}
.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static{
float:none!important;
display:inline-block!important;
}