diff --git a/resources/mixins.less b/resources/mixins.less
index 980b33d2..238f2658 100644
--- a/resources/mixins.less
+++ b/resources/mixins.less
@@ -48,14 +48,14 @@
 	}
 }
 
+.sticky-header-element {
+	top: var( --height-sticky-header ) !important;
+}
+
 .citizen-sticky-header(@bottomBorder: true, @zIndex: true) {
 	position: -webkit-sticky;
 	position: sticky;
-	top: 0;
-	transition-timing-function: var( --transition-timing-function-ease );
-	transition-duration: var( --transition-duration-base );
-	transition-property: transform;
-	transform: translate3d( 0, var( --height-sticky-header ), 0 );
+	.sticky-header-element;
 
 	& when (@bottomBorder ) {
 		box-shadow: 0 1px 0 0 var( --border-color-base );
diff --git a/resources/skins.citizen.styles/components/StickyHeader.less b/resources/skins.citizen.styles/components/StickyHeader.less
index 6f349e26..50c14bf2 100644
--- a/resources/skins.citizen.styles/components/StickyHeader.less
+++ b/resources/skins.citizen.styles/components/StickyHeader.less
@@ -95,7 +95,7 @@ html {
  * to make their templates compatible with the Citizen sticky header.
  */
 .mw-sticky-header-element {
-	top: var( --height-sticky-header ) !important;
+	.sticky-header-element;
 }
 
 // Make sticky header more compact if there are less screen estate