diff --git a/core/themes/olivero/css/components/header-sticky-toggle.css b/core/themes/olivero/css/components/header-sticky-toggle.css
index 66416e51ca6ab76cbb735962dca32d763b4304b8..788611c33391dbee288f5a25c647b39f17aa5c41 100644
--- a/core/themes/olivero/css/components/header-sticky-toggle.css
+++ b/core/themes/olivero/css/components/header-sticky-toggle.css
@@ -57,9 +57,15 @@
 }
 
 .sticky-header-toggle__icon {
-  position: relative;
+  --icon-bar-height: 0.1875rem;
+  --icon-bar-space: 0.4375rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   width: var(--sp2);
-  height: 1.3125rem;
+  height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
+  /* Height = 3 bars + 2 spaces */
   transition: opacity 0.2s;
   pointer-events: none;
   transform-style: preserve-3d;
@@ -67,38 +73,10 @@
 
 .sticky-header-toggle__icon > span {
   display: block;
-  height: 0;
-  /* Intentionally not using CSS logical properties. */
-  border-top: solid 3px var(--color--white);
-}
-
-.sticky-header-toggle__icon > span:nth-child(1) {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  width: 100%;
-  height: 0;
-  transition: transform 0.2s;
-  background-color: var(--color--white);
-}
-
-.sticky-header-toggle__icon > span:nth-child(2) {
-  position: absolute;
-  inset-block-start: 0.5625rem;
-  inset-inline-start: 0;
-  width: 100%;
-  height: 0;
-  transition: opacity 0.2s;
-  background-color: var(--color--white);
-}
-
-.sticky-header-toggle__icon > span:nth-child(3) {
-  position: absolute;
-  inset-block: auto 0;
-  inset-inline-start: 0;
   width: 100%;
-  height: 0;
+  height: var(--icon-bar-height);
   transition: transform 0.2s;
+  transform-origin: center;
   background-color: var(--color--white);
 }
 
@@ -109,8 +87,7 @@
 }
 
 [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
-  inset-block-start: 0.5625rem;
-  transform: rotate(-45deg);
+  transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
 }
 
 [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
@@ -118,6 +95,5 @@
 }
 
 [aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
-  inset-block-start: 0.5625rem;
-  transform: rotate(45deg);
+  transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
 }
diff --git a/core/themes/olivero/css/components/header-sticky-toggle.pcss.css b/core/themes/olivero/css/components/header-sticky-toggle.pcss.css
index eabc7b825387c67916c1bf19f51c908678a14cd3..de527ec9920050e61119a8a705f37338d95e2e01 100644
--- a/core/themes/olivero/css/components/header-sticky-toggle.pcss.css
+++ b/core/themes/olivero/css/components/header-sticky-toggle.pcss.css
@@ -47,48 +47,26 @@ body.is-always-mobile-nav .sticky-header-toggle {
 }
 
 .sticky-header-toggle__icon {
-  position: relative;
+  --icon-bar-height: 3px;
+  --icon-bar-space: 7px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   width: var(--sp2);
-  height: 21px;
+  height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2));
+  /* Height = 3 bars + 2 spaces */
   transition: opacity 0.2s;
   pointer-events: none;
   transform-style: preserve-3d;
 
   & > span {
     display: block;
-    height: 0;
-    /* Intentionally not using CSS logical properties. */
-    border-top: solid 3px var(--color--white);
-
-    &:nth-child(1) {
-      position: absolute;
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      width: 100%;
-      height: 0;
-      transition: transform 0.2s;
-      background-color: var(--color--white);
-    }
-
-    &:nth-child(2) {
-      position: absolute;
-      inset-block-start: 9px;
-      inset-inline-start: 0;
-      width: 100%;
-      height: 0;
-      transition: opacity 0.2s;
-      background-color: var(--color--white);
-    }
-
-    &:nth-child(3) {
-      position: absolute;
-      inset-block: auto 0;
-      inset-inline-start: 0;
-      width: 100%;
-      height: 0;
-      transition: transform 0.2s;
-      background-color: var(--color--white);
-    }
+    width: 100%;
+    height: var(--icon-bar-height);
+    transition: transform 0.2s;
+    transform-origin: center;
+    background-color: var(--color--white);
   }
 }
 
@@ -100,8 +78,7 @@ body.is-always-mobile-nav .sticky-header-toggle {
 
 [aria-checked="true"] .sticky-header-toggle__icon {
   & > span:nth-child(1) {
-    inset-block-start: 9px;
-    transform: rotate(-45deg);
+    transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg);
   }
 
   & > span:nth-child(2) {
@@ -109,7 +86,6 @@ body.is-always-mobile-nav .sticky-header-toggle {
   }
 
   & > span:nth-child(3) {
-    inset-block-start: 9px;
-    transform: rotate(45deg);
+    transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg);
   }
 }
diff --git a/core/themes/olivero/css/components/navigation/nav-button-mobile.css b/core/themes/olivero/css/components/navigation/nav-button-mobile.css
index a4b43889b6c6ec375be438db1d767da7f7f3c2a0..21069306080d4394ae10bc16426250a50df44bd8 100644
--- a/core/themes/olivero/css/components/navigation/nav-button-mobile.css
+++ b/core/themes/olivero/css/components/navigation/nav-button-mobile.css
@@ -82,38 +82,34 @@
   border-top: solid 3px var(--color--primary-50);
 }
 
-.mobile-nav-button__icon:before {
+.mobile-nav-button__icon::before,
+.mobile-nav-button__icon::after {
   position: absolute;
-  inset-block-start: -0.6875rem;
+  inset-block-start: 0;
   inset-inline-start: 0;
   width: 100%;
   height: 0;
   content: "";
-  transition: all 0.2s;
+  transition: transform 0.2s;
   border-top: solid 3px var(--color--primary-50);
 }
 
-.mobile-nav-button__icon:after {
-  position: absolute;
-  inset-block: auto -0.5rem;
-  inset-inline-start: 0;
-  width: 100%;
-  height: 0;
-  content: "";
-  transition: all 0.2s;
-  border-top: solid 3px var(--color--primary-50);
+.mobile-nav-button__icon::before {
+  transform: translateY(-0.6875rem);
+}
+
+.mobile-nav-button__icon::after {
+  transform: translateY(0.3125rem);
 }
 
 .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
-  border-top: 0;
+  border-top-color: transparent;
 }
 
-.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:before {
-  inset-block-start: 0;
-  transform: rotate(-45deg);
+.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before {
+  transform: translateY(-0.1875rem) rotate(-45deg);
 }
 
-.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:after {
-  inset-block-start: 0;
-  transform: rotate(45deg);
+.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after {
+  transform: translateY(-0.1875rem) rotate(45deg);
 }
diff --git a/core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css b/core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css
index 14c975da7794448550f9b0660fd4f7d3c81f3d16..38fc2736d63dcdf1edc932c554c5d7ca0f2dca7e 100644
--- a/core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css
@@ -68,39 +68,35 @@
   height: 0;
   border-top: solid 3px var(--color--primary-50);
 
-  &:before {
+  &::before,
+  &::after {
     position: absolute;
-    inset-block-start: -11px;
+    inset-block-start: 0;
     inset-inline-start: 0;
     width: 100%;
     height: 0;
     content: "";
-    transition: all 0.2s;
+    transition: transform 0.2s;
     border-top: solid 3px var(--color--primary-50);
   }
 
-  &:after {
-    position: absolute;
-    inset-block: auto -8px;
-    inset-inline-start: 0;
-    width: 100%;
-    height: 0;
-    content: "";
-    transition: all 0.2s;
-    border-top: solid 3px var(--color--primary-50);
+  &::before {
+    transform: translateY(-11px);
+  }
+
+  &::after {
+    transform: translateY(5px);
   }
 }
 
 .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
-  border-top: 0;
+  border-top-color: transparent;
 
-  &:before {
-    inset-block-start: 0;
-    transform: rotate(-45deg);
+  &::before {
+    transform: translateY(-3px) rotate(-45deg);
   }
 
-  &:after {
-    inset-block-start: 0;
-    transform: rotate(45deg);
+  &::after {
+    transform: translateY(-3px) rotate(45deg);
   }
 }