diff --git a/resources/skins.citizen.scripts/stickyHeader.js b/resources/skins.citizen.scripts/stickyHeader.js
index 10e37822..e75cca3f 100644
--- a/resources/skins.citizen.scripts/stickyHeader.js
+++ b/resources/skins.citizen.scripts/stickyHeader.js
@@ -43,12 +43,12 @@ function init() {
 	placeholder.id = 'citizen-page-header-sticky-placeholder';
 	header.insertAdjacentElement( 'afterend', placeholder );
 
-	let staticHeaderHeight = header.offsetHeight;
+	let staticHeaderHeight = header.getBoundingClientRect().height;
 
 	const toggleStickyHeader = ( isSticky ) => {
 		window.requestAnimationFrame( () => {
 			document.body.classList.toggle( STICKY_CLASS, isSticky );
-			placeholder.style.height = `${ staticHeaderHeight - header.offsetHeight }px`;
+			placeholder.style.height = `${ staticHeaderHeight - header.getBoundingClientRect().height }px`;
 		} );
 	};
 
@@ -68,7 +68,7 @@ function init() {
 
 	const onResizeEnd = () => {
 		// Refresh static header height after resize
-		staticHeaderHeight = header.offsetHeight;
+		staticHeaderHeight = header.getBoundingClientRect().height;
 		toggleStickyHeader( true );
 	};
 
diff --git a/resources/skins.citizen.styles/components/StickyHeader.less b/resources/skins.citizen.styles/components/StickyHeader.less
index 387a43b3..8b11141a 100644
--- a/resources/skins.citizen.styles/components/StickyHeader.less
+++ b/resources/skins.citizen.styles/components/StickyHeader.less
@@ -1,5 +1,6 @@
 #citizen-page-header-sticky-sentinel {
 	grid-area: afterHeader; // align right above content
+	margin-top: -1px;
 	height: 1px;
 	visibility: hidden;
 	contain: strict;