Keeping ms-designer-ribbon from remaining fixed with a fixed ms-breadcrumb-top

Question

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.

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.