Top Navigation Styles in SharePoint 2013

Modify the master page

• Add a link to Custom Css in master page.
• On the head tag of master page html add below highlight lines

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

<!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->

• In your Custom master.css file, add the below CSS classes

 .ms-breadcrumb-top {  
  background-color:#5482AB;  
 }  
 .ms-core-listMenu-horizontalBox {  
 background-color:#5482AB;  
   padding: 0px;  
   margin: 0px;  
   padding-left: 10px;  
   color: #ffffff;  
 }  
 .ms-core-listMenu-horizontalBox li.static {  
  color: #ffffff;  
 }  
 .ms-core-listMenu-horizontalBox li.static a:hover{  
  color: #ffffff !important;  
 }  
 .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {  
   color: #ffffff;  
    white-space: nowrap;  
    border: 1px solid transparent;  
    padding: 6px 10px;  
    line-height: 20px;  
    height: 20px;  
    font-size: 10pt;  
    font-weight:bold;  
    font-family:Arial, Helvetica, Sans-Serif;  
    margin-right:5px;  
 }  
 .ms-core-listMenu-horizontalBox li.static span.static {  
 }  
 .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {  
   text-decoration: none;  
    background-color:#D95E00;  
    background-image:none;  
 }  
 .ms-core-listMenu-horizontalBox li.selected a.selected {  
   text-decoration: none;  
    background-color:#D95E00;  
    background-image:none;  
 }  
 ul.dynamic {  
  background-color:#f7f7f7;   
  border:1px solid #b8babd;  
  padding:0px;  
 }  
 ul.dynamic .ms-core-listMenu-item {  
  background-color:#f7f7f7;  
  line-height:20px;  
  font-size: 9pt;   
  font-weight:normal;   
  color:#333;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
  padding:5px;  
 }  
 ul.dynamic .ms-core-listMenu-item:hover {  
    color:#ffffff;  
    background-color:#D95E00;  
 }  
 .ms-listMenu-editLink  
 {  
   display:none !important;  
 }  

• ms-listMenu-editLink  class is for edit Links button.