Fixed width master page in SharePoint 2013

Designing a fixed width site in SharePoint 2013, its very simple. Below steps resolves the issue of Ribbon not appearing on top when editing a long page. The ribbon position is fixed.

Modifying the master page

• Open the master page HTML.

• Add below line just above the div with id ms-designer-ribbon. So the code will look like this

<div id="mainwrapper" class="mainwrapper" runat="server">

<div id="ms-designer-ribbon">

• Add the div closing tag just above the body closing tag

</div>

</body>

• Add the link to custom css and js file in master page
• On the head tag of master page html add below lines

<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->

<!--SPM:<SharePoint:ScriptLink Name="~sitecollection/Style Library/PMO/master.js" runat="server"/>-->

<!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->

Adding the CSS

• Add the below styles in your master.css file

 body  
 {  
   overflow: auto !important;  
 }  
 .mainwrapper  
 {  
   width: 980px;  
   margin: 0 0;  
   padding: 0;  
   margin-left: auto;  
   margin-right: auto;  
   border-top:none;  
 }  
 body #s4-workspace {  
  overflow: visible !important;  
  position:relative;  
  padding-top:44px;  
 }  
 #ms-designer-ribbon  
 {  
  position:fixed;  
  z-index: 100;  
  width:980px;  
 }  
 body #s4-ribbonrow {  
  position: fixed;  
  z-index: 100;  
  width:980px;  
 }  
 #s4-ribbonrow .ms-MenuUIPopupBody, #s4-ribbonrow .ms-popoutMenu, .ms-cui-menu[id ^= "Ribbon."] {  
  position: fixed !important;  
  background-color:#ffffff;  
 }  
 #s4-mainarea  
 {  
   width: 980px;  
 }  

Add the Script

• Add the below javascript in your master.js file

 function FixRibbonAndWorkspaceDimensions() {  
   g_frl = true;  
   var elmRibbon = GetCachedElement("s4-ribbonrow");  
   var elmWorkspace = GetCachedElement("s4-workspace");  
   var elmTitleArea = GetCachedElement("s4-titlerow");  
   var elmBodyTable = GetCachedElement("s4-bodyContainer");  
   if (!elmRibbon || !elmWorkspace || !elmBodyTable) {  
     return;  
   }  
   if (!g_setWidthInited) {  
     var setWidth = true;  
     if (elmWorkspace.className.indexOf("s4-nosetwidth") > -1)  
       setWidth = false;  
     g_setWidth = setWidth;  
     g_setWidthInited = true;  
   }  
   else {  
     var setWidth = g_setWidth;  
   }  
   var baseRibbonHeight = RibbonIsMinimized() ? 55 : 145;  
   var ribbonHeight = baseRibbonHeight + g_wpadderHeight;  
   if (GetCurrentEltStyle(elmRibbon, "visibility") == "hidden") {  
     ribbonHeight = 0;  
   }  
   if (elmRibbon.children.length > 0 && document.getElementsByTagName("html")[0].className.indexOf('ms-dialog-nr') == -1) {  
     elmWorkspace.style.paddingTop = ribbonHeight + 'px';  
   }  
 }  

The result master page will look like this.

For page with long text, the ribbon is always display at top