I have been playing around with some CSS to override some MasterPage elements, one of which is to customise the global nav bar. Global Nav is represented using a Managed Meta Data term-set.

This is what it looks like currently:

using the following code snippet:

    /* NEW TOP NAVIGATION BEGIN */ .MenuWrapper {     background-color:#AFA9A2 !important;      padding:0px !important;      margin: 0px !important; }  .ms-core-listMenu-horizontalBox a.ms-core-listMenu-item {      padding: 5px 10px 5px 10px !important;     background-color:#AFA9A2 !important;     margin:0px !important;     border-right: 0px solid #AFA9A2 !important;     font-weight:600 !important;     text-transform:uppercase !important; }  #DeltaTopNavigation .static {     padding-left: 0px !important; }  #DeltaTopNavigation .menu-item-text {     padding: 0px 5px 0px 13px !important; }  .ms-core-listMenu-horizontalBox a.ms-core-listMenu-item {     color:#FFFFFF !important;     border-right:1px solid #AFA9A2 !important; }  .ms-core-listMenu-horizontalBox a.ms-core-listMenu-item:hover {     color: #FFFFFF !important;     background-color: #842B91 !important; }  .ms-core-listMenu-horizontalBox a.ms-core-listMenu-selected {     color: #FFFFFF!important;     background-color: #842B91 !important; }  #DeltaTopNavigation ul.dynamic {     border:1px solid #AFA9A2 !important;     background-color:#842B91 !important;     color:#AFA9A2 !important;     padding:0px !important;      margin-left:10px !important;     width: 200px !important; }   #DeltaTopNavigation  ul.dynamic .menu-item-text {     padding: 0px !important; }  #DeltaTopNavigation ul.dynamic li ul.dynamic {     margin-left:0px  !important; }    .ms-core-listMenu-horizontalBox ul.dynamic a.ms-core-listMenu-item {     color:#FFFFFF !important;     border-bottom:1px solid #AFA9A2 !important; }  .ms-core-listMenu-horizontalBox ul.dynamic a.ms-core-listMenu-item:hover {     background-color:#842B91 !important; }  #DeltaTopNavigation li.dynamic {     padding: 0px !important;     list-style:none !important;     width:inherit !important;     font-weight:bold !important; }  #DeltaTopNavigation li.dynamic a.ms-core-listMenu-item{     border-right: 0px #AFA9A2 !important;  }  .ms-breadcrumb-top{     white-space: nowrap;     position:absolute;     top: 55px; }  /* NEW TOP NAVIGATION END */ 

This is what I would like to get it to look like, but after hours of messing around, still can’t get it to work (excuse the badly drawn screenshot!):

Ideas and suggestions much appreciated!

Thank you