Instantly share code, notes, and snippets.
Created Mar 24, 2017
Positioning a fixed header below the Sitecore Experience Editor ribbon
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon | |
// includes added support for the Sitecore Extensions Chrome extension and its support for hiding the ribbon entirely | |
define(["sitecore"], function (Sitecore) { | |
return { | |
priority: 50, | |
execute: function (context) { | |
// TODO: Change this CSS selector to suit your application | |
var FIXED_NAV_SELECTOR = 'nav'; | |
// the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is) | |
var scCrossPiece = window.parent.document.getElementById('scCrossPiece'); | |
var nav = window.parent.document.querySelector('.main-nav_bar'); | |
if (scCrossPiece && 'MutationObserver' in window) { | |
var observer = new MutationObserver(function (mutations) { | |
// This class is added when Sitecore Extensions hides the ribbon | |
if (scCrossPiece.classList.contains('sc-ext-toggleRibon-hidden')) { | |
nav.style.top = '0px'; | |
} else { | |
nav.style.top = scCrossPiece.style.height; | |
} | |
}); | |
observer.observe(scCrossPiece, { attributes: true, attributeFilter: ['style', 'class'] }); | |
} | |
} | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon | |
define(["sitecore"], function (Sitecore) { | |
return { | |
priority: 50, | |
execute: function (context) { | |
// TODO: Change this CSS selector to suit your application | |
var FIXED_NAV_SELECTOR = '#main-nav'; | |
// the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is) | |
var scCrossPiece = window.parent.document.getElementById('scCrossPiece'); | |
var nav = window.parent.document.querySelector(FIXED_NAV_SELECTOR); | |
if (scCrossPiece && 'MutationObserver' in window) { | |
var observer = new MutationObserver(function (mutations) { | |
nav.style.top = scCrossPiece.style.height; | |
}); | |
observer.observe(scCrossPiece, { attributes: true, attributeFilter: ['style'] }); | |
} | |
} | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment