I am keeping global nav sticking to the top of the page by keeping ms-breadcrumb-top fixed to the top of the page and stretching across the browser using this css:

.ms-breadcrumb-top {
position: fixed;
top: 0px;
left: 0px:
width: 100% }

It works, but ms-designer-ribbon comes along with it when I scroll down the page.

I tried setting ms-designer-ribbon to position:absolute and z-index:-1, but that is probably not right as it doesn't work.

I want ms-designer-ribbon to not stay fixed with ms-breadcrumb-top.

The ultimate goal is to create a sticky / shrinking global nav (with some js later on) as I scroll down the page, but I just want the global nav to do it, not the ms-designer-ribbon.

1 Answer 1


Moving the suite bar / ribbon into the $s4-workspace comes with quite a few complications, I almost always recommend against it. If the suite bar / ribbon is too tall, I suggest combining them using a little css / JS.

But to answer you question, I first have to assume that you did update the master page and moved the .ms-designer-ribbon wrapper and its codeblock into s4-workspace or s4-bodyContainer? If not, start there. Otherwise SP will fight you as it dynamically resizes s4-workspace.

If you did move the ribbon then you may need to make sure that css position of the ms-designer-ribbon is set to relative and not fixed or absolute. That should make the suite bar / ribbon flow inline with your scrolling page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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