diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index 3449b033e..e65bda41b 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -246,20 +246,30 @@ header#document-header
outline-offset: 5px
outline-style: dashed
outline-width: 1px
- @include media-breakpoint-down(desktop)
- display: flex
- align-items: center
- span:first-of-type
+ .button-title
@include meta
font-size: pxToRem(14)
text-transform: uppercase
+ &--close
+ display: none
+
span:last-of-type
- background: none
@include icon-block(menu-line, before)
- vertical-align: baseline
margin-right: $icon-burger-margin-right
+ vertical-align: baseline
+ background: none
+
&[aria-expanded="true"]
+ .button-title
+ &--open
+ display: none
+ &--close
+ display: block
span:last-of-type
&::before
content: map-get($icons, "close-line")
margin-right: $icon-close-margin-right
+
+ @include media-breakpoint-down(desktop)
+ align-items: center
+ display: flex
diff --git a/i18n/en.yml b/i18n/en.yml
index 96454d83b..d541ace53 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -195,7 +195,9 @@ commons:
main: Main menu
secondary: Secondary menu
social: Socials networks menu
- title: Menu
+ title:
+ open: Menu
+ close: Close
upper: Menu d'accès rapide
more: Read more
more_aria: Read more about “{{ .Title }}”
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 23485afd9..e70e8374e 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -196,7 +196,9 @@ commons:
main: Menu principal
secondary: Menu secondaire
social: Menu réseaux sociaux
- title: Menu
+ title:
+ open: Menu
+ close: Fermer
upper: Menu d'accès rapide
more: En savoir plus
more_aria: En savoir plus sur “{{ .Title }}“
diff --git a/i18n/pt.yml b/i18n/pt.yml
index 85a09b851..256b452e8 100644
--- a/i18n/pt.yml
+++ b/i18n/pt.yml
@@ -176,7 +176,9 @@ commons:
main: Menu principal
secondary: Menu secundário
social: Menu de redes sociais
- title: Menu
+ title:
+ open: Menu
+ close: Fechar
upper: Menu de acesso rápido
more: Saiba mais
more_aria: Saiba mais sobre “{{ .Title }}“
diff --git a/layouts/_partials/header/button.html b/layouts/_partials/header/button.html
index 9e230db88..56a14b25b 100644
--- a/layouts/_partials/header/button.html
+++ b/layouts/_partials/header/button.html
@@ -3,7 +3,8 @@
aria-expanded="false"
aria-label="{{ i18n "commons.menu.label" }}"
class="header-button">
- {{ i18n "commons.menu.title" }}
+ {{ i18n "commons.menu.title.open" }}
+ {{ i18n "commons.menu.title.close" }}
{{/* djlint:off */}}
{{/* djlint:on */}}