From 29cba222ad41e665b9291060f6c7c06f74a2f711 Mon Sep 17 00:00:00 2001 From: Myrta Sakellariou Date: Thu, 9 Jan 2025 08:30:00 +0100 Subject: [PATCH 1/2] increase default header z-index --- .../src/components/post-header/post-header.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss index 2b22afd3ed..67b4d2737f 100644 --- a/packages/components/src/components/post-header/post-header.scss +++ b/packages/components/src/components/post-header/post-header.scss @@ -12,6 +12,8 @@ --global-header-minimal-height: 24px; --main-header-height: 56px; --header-height: calc(var(--global-header-height) + var(--main-header-height)); + z-index: var(--header-z-index, 2000); + overflow: hidden; @include media.min(lg) { display: block; @@ -46,7 +48,7 @@ position: sticky; padding-inline: var(--post-core-dimension-4); height: var(--global-header-height); - z-index: 1; + z-index: var(--header-z-index) + 3; @include media.max(lg) { inset-block-start: 0; @@ -94,6 +96,7 @@ slot[name='post-logo'] { } .title-header { + z-index: var(--header-z-index) + 2; display: flex; align-items: center; gap: var(--post-core-dimension-4); @@ -107,7 +110,6 @@ slot[name='post-logo'] { @include media.max(lg) { position: sticky; - z-index: 1; inset-block-start: var(--global-header-height); padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16); @@ -141,10 +143,9 @@ slot[name='post-logo'] { .navigation { background: var(--post-core-color-brand-white); - + z-index: var(--header-z-index) + 1; @include media.min(lg) { position: sticky; - z-index: 1; inset-block-start: var(--global-header-minimal-height); } } From 52832d10f26f8e0c73d809b1e3fabaa204785299 Mon Sep 17 00:00:00 2001 From: Myrta Sakellariou Date: Thu, 9 Jan 2025 08:33:12 +0100 Subject: [PATCH 2/2] changeset --- .changeset/stupid-squids-add.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stupid-squids-add.md diff --git a/.changeset/stupid-squids-add.md b/.changeset/stupid-squids-add.md new file mode 100644 index 0000000000..2f671ee915 --- /dev/null +++ b/.changeset/stupid-squids-add.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Set post-header z-index