Branding SharePoint 2013 Top Navigation Menu bar with Custom CSS

Branding SharePoint top navigation is one of the frequent requirement in SharePoint implementations. Here is my quick way to apply branding to SharePoint 2013 top navigation menu. 

Step 1: Create a custom CSS file with custom styles for your navigation menu (Find my CSS below!). Upload it either to site assets library/Master pages folder or to file system (/_Layouts/Styles/).

Step 2: Edit the HTML master page and add reference to your custom CSS.
Open the HTML master page of your site in SharePoint designer (by default: Seattle.html), Locate this chunk:

<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->

Add this line just below it:

<!--SPM:<SharePoint:CssRegistration Name="http://YOUR-SITE-COLLECTION-URL/SiteAssets/YOUR-CSS-FILE.css" runat="server" After="corev15.css" />-->

Rather hard-coding the URL, upload/deploy custom CSS to Master Pages folder and set the path as:

<!--SPM:<SharePoint:CssRegistration name="&lt;% $SPUrl:~site/_catalogs/masterpage/YOURFOLDER/YOUR-style-Sheet.css %&gt;" runat="server" after="SharepointCssFile" />-->

Custom CSS to Branding SharePoint 2013 Top Navigation Menu:
and my Custom CSS goes here:

 /*** Top Navigaion Menu Items container DIV ***/
.ms-core-listMenu-horizontalBox {
    background-color: #47A4D3;
}  

 /*** Top Navigaion Static Menu Items ***/ 
.ms-core-listMenu-horizontalBox li.static {
    border: 1px solid transparent;
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
}

 /*** Top Navigaion Static Menu Item Links  ***/ 
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
    color: #21374C;
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 10px;
    padding-left: 20px;
    margin-right: 1px;
}  

  /* Top Navigation static Menu Item Links Hover Style  */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
    background-color: #0A85C4;
    color: #fff;
    text-decoration: none;
}

 /*** Top Navigaion Static Menu Selected ***/
.ms-core-listMenu-horizontalBox li.selected a.selected {
     /* Glass Effect Shade Image */
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
 /* Glass Effect Shade Image */
    background-color: #0A85C4;
    color: #fff;
    text-decoration: none;
    border: 1px #134072 solid;
    padding: 10px 10px;
    margin: 1px;
}  

 /*** Sub-Menu/Flyover/Dynamic Menu Container ***/
ul.dynamic {
    background-color: #D5E4F2;
    border: 1px solid #000;
    padding: 1px;
    margin-top: 5px;
}  

/***  Sub-Menu Items (HyperLinks) Style ***/
ul.dynamic .ms-core-listMenu-item {
    background-color: #f7f7f7;
    padding: 10px 20px 10px 20px;
    white-space: nowrap;
}  


/*** Sub-Menu Items (HyperLinks) Hover Style ***/
ul.dynamic .ms-core-listMenu-item:hover {
    background-color: #61CBFD;
    color: #FFF;
}  

 /** Hide "Edit Links" ***/
.ms-listMenu-editLink {
    display: none !important;
}  

Rackspace has good CSS reference: http://sharepoint.rackspace.com/branding-top-navigation-in-sharepoint-2013, 

Here is my branded SharePoint 2013 top navigation menu bar.
 Here is my another post on: Branding SharePoint 2010 Top Navigation