0

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:

Before

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!):

AfterTwo

Ideas and suggestions much appreciated!

Thank you

1

Try the following CSS:

div.ms-breadcrumb-box {
  width: 100%;
  height: auto;
  position: absolute;
  margin-left: -20px !important;
  top: 85px;
}

div#contentRow {
   padding-top: 85px;
}

A better way would to be restructure your html in the master page. Move the top nav code block in to it's own div under the header.

  • Thank you! - that was very helpful. I really should get my figer out of my *** and finally learn HTML/CSS ! :) - problem now is that while it has aligned itself, it's moved the search box with it and it still has not filled the right-side – Rob Nov 14 '17 at 16:07
  • Ok, i just changed the .ms-breadcrumb-box to .ms-breadcrumb-top and the margin-left: -20px !important; to margin-left: -220px !important; and that got it to allign left without moving the search box also. I still cant fill the entire line in color though, hmmm – Rob Nov 14 '17 at 16:34
  • i got it!! - so proud of myself, i winged it and put in margin-right: 220px;background-color: #AFA9A2 !important; – Rob Nov 14 '17 at 16:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.