, on the whole site.
*
* What it does: measures the real rendered height (and top
* position, so it already accounts for the WP admin bar) of the
* fixed header, then writes that number into the
* --site-header-height CSS variable that sticky-header-fixed.css
* uses for desktop/tablet padding-top. This means you never have
* to guess or hardcode a pixel value, and it keeps working even
* if the header's height changes (logo swap, menu changes, admin
* bar toggling, etc).
*/
(function () {
function getHeader() {
return (
document.querySelector('.elementor-location-header') ||
document.querySelector('header.elementor-location-header') ||
document.querySelector('.elementor-element-0cc44c6')
);
}function setHeaderOffset() {
// Mobile keeps its own fixed 75px value in the CSS, so skip it here.
if (window.innerWidth < 768) return;var header = getHeader();
if (!header) return;var rect = header.getBoundingClientRect();
var offset = Math.ceil(rect.bottom); // top + height, includes admin-bar offset
document.documentElement.style.setProperty('--site-header-height', offset + 'px');
}window.addEventListener('load', setHeaderOffset);
window.addEventListener('resize', setHeaderOffset);// Re-measure automatically if the header's own size changes
// (e.g. a sticky/scrolled state class shrinks it).
if (window.ResizeObserver) {
var header = getHeader();
if (header) {
new ResizeObserver(setHeaderOffset).observe(header);
}
}
})();
