Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Positioning a fixed header below the Sitecore Experience Editor ribbon
// 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'] });
}
}
};
});
// 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