We have a SharePoint 2013 publishing site that is using a Bootstrap template and the top nav (static) gets missplaced after scrolling down a long page and collapsing the browser window and back to normal size.

When I resize a long page, the navigation menu sometimes gets stuck in the wrong place, hiding and preventing access to important ribbon and menu elements.

Top Nav getting placed on the very top after resizing a long page. Refreshing the browser places back above the breadcrumb.


The solution for your problem is probably in reviewing the dynamic sizing of the s4-workspace container DIV.

Both the width and height of that container are dynamically calculated with a JavaScript function that is executed after onload does, and most possibly the sticky header has (as well) some logic to be positioned. Maybe those functions are interfering with each other.

The first thing that I would try is writing CSS that overrides the dynamic height of the s4-workspace and returns control of the scrollbars to the . This can be done by setting the "height", "width" to "auto" and "overflow" to "visible". And removing the "noscroll" from the tag, and adding "overflow: scroll" to it.

Another container that you may want to investigate is the "s4-ribbonrow", which is the one that contains the ribbon and (typically) the SharePoint site's header. This header is covered by the ribbon when displayed.

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.