diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss
index b5f2d25f7..e88200d32 100644
--- a/assets/sass/layout/_header.scss
+++ b/assets/sass/layout/_header.scss
@@ -4,28 +4,15 @@ $header-bg: $white;
 .site-header {
     background: $header-bg;
     position: relative;
+
     > .container {
-        height: $header-height;
+        height: $header-height-sm;
         display: flex;
         align-items: center;
-    }
-    @include media-breakpoint-down(lg) {
-        > .container {
-            height: $header-height-sm;
-            position: relative;
-            .site-logo {
-                order: 1;
-                margin-right: auto;
-            }
-            .language-selector {
-                order: 2;
-            }
-            .header-search {
-                order: 3;
-            }
-            .mainnav-toggle {
-                order: 4;
-            }
+        position: relative;
+
+        @include media-breakpoint-up(lg) {
+            height: $header-height;
         }
     }
 }
@@ -33,6 +20,20 @@ $header-bg: $white;
 /* header language selector */
 .language-selector {
     margin: 0 0 0 1em;
+    order: 2;
+
+    @include media-breakpoint-up(lg) {
+        order: revert;
+    }
+
+    &.show {
+        .current-lang {
+            position: relative;
+            z-index: 1001;
+            background: $primary;
+        }
+    }
+
     a {
         @extend %hover-underline;
         @include text-0_75;
@@ -41,64 +42,104 @@ $header-bg: $white;
         font-weight: 700;
         color: $black;
     }
+
     .current-lang {
-        height: $header-height;
+        height: $header-height-sm;
         display: flex;
         align-items: center;
         padding: 0 1em;
         transition: color .2s;
-        @include media-breakpoint-down(lg) {
-            height: $header-height-sm;
+
+        @include media-breakpoint-up(lg) {
+            height: $header-height;
         }
     }
+
     .dropdown-menu {
         border: 0;
         background: $primary;
         margin: 0;
-        text-align: right;
+        text-align: left;
         right: 0;
         left: auto !important;
         top: -.125rem !important;
         box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .1);
-        @include media-breakpoint-down(lg) {
-            text-align: left;
+
+        @include media-breakpoint-up(lg) {
+            text-align: right;
         }
+
         a {
             padding: .5em 1em;
             display: block;
         }
+
         .current {
             a {
                 color: $gray-54;
             }
         }
     }
-    &.show {
-        .current-lang {
-            position: relative;
-            z-index: 1001;
-            background: $primary;
-        }
-    }
 }
 
 /* header-searchbox */
 .header-search {
+    height: $header-height-sm;
     $btn-width: 4rem;
-    height: $header-height;
     position: relative;
+    z-index: 1000;
+    order: 3;
+
+    @include media-breakpoint-up(lg) {
+        height: $header-height;
+        order: revert;
+    }
+
+    /* searchbox opened */
+    .searchbox-active & {
+        .searchbox-toggle {
+            background: $primary;
+            transition: color .2s;
+        }
+        .navbar-search {
+            opacity: 1;
+            width: 18rem;
+            transition: width .4s;
+            z-index: 1;
+        }
+        /* entered text in input */
+        &.filled {
+            .searchbox-toggle {
+                pointer-events: none;
+            }
+        }
+    }
+
     .searchbox-toggle {
         @extend %hover-underline;
         @include text-base;
         color: $black;
-        display: block;
-        line-height: $header-height;
-        width: $btn-width;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        line-height: $header-height-sm;
+        width: 4rem;
         text-align: center;
         background: $header-bg;
         z-index: 2;
         transition: color .2s, background .3s;
+        z-index: 1002;
+
+        @include media-breakpoint-up(lg) {
+            line-height: $header-height;
+        }
+
+        @include media-breakpoint-up(md) {
+            width: $btn-width;
+        }
     }
+
     .navbar-search {
         padding: 1rem $btn-width 1rem 1rem;
         width: 0;
@@ -110,7 +151,9 @@ $header-bg: $white;
         display: flex;
         background: $primary;
         opacity: 0;
+        z-index: 1001;
     }
+
     .search-query {
         flex: 1;
         width: 100%;
@@ -119,10 +162,12 @@ $header-bg: $white;
         border-bottom: 2px solid $black;
         appearance: none;
         border-radius: 0;
+
         &:focus {
             outline: none;
         }
     }
+
     .search-submit {
         width: $btn-width;
         position: absolute;
@@ -131,35 +176,4 @@ $header-bg: $white;
         bottom: 0;
         cursor: pointer;
     }
-
-    /* searchbox opened */
-    .searchbox-active & {
-        .searchbox-toggle {
-            background: $primary;
-            transition: color .2s;
-        }
-        .navbar-search {
-            opacity: 1;
-            width: 18rem;
-            transition: width .4s;
-            z-index: 1;
-        }
-        /* entered text in input */
-        &.filled {
-            .searchbox-toggle {
-                pointer-events: none;
-            }
-        }
-    }
-    @include media-breakpoint-down(lg) {
-        height: $header-height-sm;
-        .searchbox-toggle {
-            line-height: $header-height-sm;
-        }
-    }
-    @include media-breakpoint-down(md) {
-        .searchbox-toggle {
-            width: 4rem;
-        }
-    }
 }
diff --git a/assets/sass/layout/_navigation.scss b/assets/sass/layout/_navigation.scss
index 3b6aa012a..2d08813cf 100644
--- a/assets/sass/layout/_navigation.scss
+++ b/assets/sass/layout/_navigation.scss
@@ -1,162 +1,185 @@
 .main-navigation {
     flex: 1;
+    display: none;
+    position: absolute;
+    left: calc(var(--bs-gutter-x) * .5);
+    right: calc(var(--bs-gutter-x) * .5);
+    top: $header-height-sm;
+    z-index: 1000;
+    background: $primary;
+    box-shadow: 0 .5rem 1rem hsla(0, 0, 0, .12);
+
+    @include media-breakpoint-up(lg) {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        top: 0;
+        background-color: $white;
+        box-shadow: none;
+    }
+
+    .mainnav-active & {
+        display: flex;
+        flex-direction: column;
+    }
+
     .navbar-nav {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: center;
         list-style-type: none;
-        margin: 0;
-        padding: 0 1rem;
         text-align: center;
+        margin: 0;
+        padding: 1rem 0;
+
+        @include media-breakpoint-up(lg) {
+            padding: 0 1rem;
+            flex-direction: row;
+        }
+
         > li {
             position: relative;
+
+            @include media-breakpoint-up(lg) {
+                &:hover, &.active {
+                    > a,
+                    > span {
+                        color: $black;
+
+                        &::after {
+                            transform: scaleY(1);
+                        }
+                    }
+
+                    .menu_level_1 {
+                        display: block;
+                    }
+                }
+            }
+
             > a,
             > span {
                 @extend %hover-underline;
                 @include text-link;
+                padding: .5em 1em;
+                color: $gray-87;
                 display: inline-block;
-                padding: 0 1.3333333333em;
-            }
-        }
-    }
-    /* main submenu */
-    .menu_level_1 {
-        list-style-type: none;
-        padding: 1rem 0;
-        margin: 0;
-        display: none;
-        a {
-            display: block;
-            padding: .5em 1.5em;
-        }
-    }
-    /* large screen sizes */
-    @include media-breakpoint-up(lg) {
-        .navbar-nav {
-            > li:hover,
-            .active {
-                > a,
-                > span {
-                    color: $black;
-                    &::after {
-                        transform: scaleY(1);
-                    }
-                }
-            }
-            > li {
-                > a,
-                > span {
+
+                @include media-breakpoint-up(lg) {
                     display: flex;
                     height: $header-height;
                     align-items: center;
                     justify-content: center;
                     color: $gray-54;
+                    padding: 0 1.3333333333em;
                 }
-                &:hover {
-                    .menu_level_1 {
+
+                &::after {
+                    display: none;
+
+                    @include media-breakpoint-up(lg) {
                         display: block;
                     }
                 }
             }
-        }
-        .menu_level_1 {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            width: 16rem;
-            z-index: 20;
-            background: $primary;
-            box-shadow: 0 .5rem 1rem hsla(0, 0, 0, .12);
-            a {
-                @include text-link;
-                &:hover {
-                    background: hsla(0, 0, 0, .05);
+
+            &[data-submenu='true'] {
+                > a {
+                    margin: 0 1.875rem;
+
+                    @include media-breakpoint-up(lg) {
+                        margin: 0;
+                    }
                 }
             }
         }
     }
+
     .submenu-trigger {
-        @extend %fontawesome;
-        display: none;
-    }
-    /* small screen sizes */
-    @include media-breakpoint-down(lg) {
-        display: none;
+        display: inline-block;
         position: absolute;
-        left: calc(var(--bs-gutter-x) * .5);
-        right: calc(var(--bs-gutter-x) * .5);
-        top: $header-height-sm;
-        z-index: 1000;
-        background: $primary;
-        box-shadow: 0 .5rem 1rem hsla(0, 0, 0, .12);
-        .navbar-nav {
-            display: block;
-            margin: 0;
-            padding: 1rem 0;
-            > li {
-                > a,
-                > span {
-                    padding: .5em 1em;
-                    color: $gray-87;
-                    &::after {
-                        display: none;
-                    }
-                }
-                &[data-submenu='true'] {
-                    > a {
-                        margin: 0 1.875rem;
-                    }
-                }
-                &.submenu-active {
-                    .menu_level_1 {
-                        display: block;
-                    }
-                    .submenu-trigger {
-                        &::before {
-                            transform: rotate(180deg);
-                        }
-                    }
-                }
+        right: 0;
+        top: 0;
+        cursor: pointer;
+        width: 1.875rem;
+        height: 1.875rem;
+        line-height: 1.875rem;
+        @extend %fontawesome;
+        @include text-0_875;
+
+        @include media-breakpoint-up(lg) {
+            display: none;
+        }
+
+        .submenu-active & {
+            &::before {
+                transform: rotate(180deg);
             }
         }
-        .mainnav-active & {
+
+        &::before {
             display: block;
+            content: '\f078';
         }
-        .submenu-trigger {
-            display: inline-block;
+    }
+
+    /* main submenu */
+    .menu_level_1 {
+        list-style-type: none;
+        padding: 1rem 0;
+        margin: 0;
+        display: none;
+
+        .submenu-active & {
+            display: block;
+        }
+
+        @include media-breakpoint-up(lg) {
             position: absolute;
-            right: 0;
-            top: 0;
-            cursor: pointer;
-            width: 1.875rem;
-            height: 1.875rem;
-            line-height: 1.875rem;
-            @include text-0_875;
-            &::before {
-                display: block;
-                content: '\f078';
-            }
+            top: 100%;
+            left: 0;
+            width: 16rem;
+            z-index: 20;
+            background: $primary;
+            box-shadow: 0 .5rem 1rem hsla(0, 0, 0, .12);
         }
-        .menu_level_1 {
-            padding: 0 0 1rem;
-            a {
-                color: $gray-54;
-                @include text-0_875;
+
+        a {
+            display: block;
+            padding: .5em 1.5em;
+
+            @include media-breakpoint-up(lg) {
+                @include text-link;
+
+                &:hover {
+                    background: hsla(0, 0, 0, .05);
+                }
             }
         }
     }
-    @include media-breakpoint-down(xs) {
-        left: 0;
-        right: 0;
-    }
 }
 
 .mainnav-toggle {
     @extend %hover-underline;
-    display: none;
+    display: block;
     position: relative;
     width: $header-height-sm;
     height: $header-height-sm;
+    order: 4;
+
+    @include media-breakpoint-up(lg) {
+        display: none;
+        order: revert;
+    }
+
+    .mainnav-active & {
+        background: $primary;
+    }
+
+    &:hover {
+        color: inherit;
+    }
+
     .hamburger {
         display: block;
         width: 1.25rem;
@@ -167,6 +190,18 @@
         top: 50%;
         margin: -.0625rem 0 0 -.625rem;
         transition: background 400ms ease-out 200ms;
+
+        .mainnav-active & {
+            background: transparent;
+            transition: background 100ms ease-out;
+            &::before {
+                transform: translate(0, .375rem) rotate(135deg);
+            }
+            &::after {
+                transform: translate(0, -.375rem) rotate(-135deg);
+            }
+        }
+
         &::before,
         &::after {
             display: block;
@@ -177,30 +212,13 @@
             background: currentColor;
             transition: all 400ms;
         }
+
         &::before {
             top: -.375rem;
         }
+
         &::after {
             bottom: -.375rem;
         }
     }
-    &:hover {
-        color: inherit;
-    }
-    .mainnav-active & {
-        background: $primary;
-        .hamburger {
-            background: transparent;
-            transition: background 100ms ease-out;
-            &::before {
-                transform: translate(0, .375rem) rotate(135deg);
-            }
-            &::after {
-                transform: translate(0, -.375rem) rotate(-135deg);
-            }
-        }
-    }
-    @include media-breakpoint-down(lg) {
-        display: block;
-    }
 }
diff --git a/assets/sass/layout/_site_logo.scss b/assets/sass/layout/_site_logo.scss
index d5f4e5700..fb7742fbf 100644
--- a/assets/sass/layout/_site_logo.scss
+++ b/assets/sass/layout/_site_logo.scss
@@ -1,13 +1,20 @@
 .site-logo {
     display: inline-block;
-    width: 14rem;
-    img {
-        width: 100%;
-    }
-    @include media-breakpoint-down(xl) {
+    width: 10rem;
+    order: 1;
+    margin-right: auto;
+
+    @include media-breakpoint-up(lg) {
         width: 12rem;
+        order: revert;
+        margin-right: revert;
     }
-    @include media-breakpoint-down(lg) {
-        width: 10rem;
+
+    @include media-breakpoint-up(xl) {
+        width: 14rem;
+    }
+
+    img {
+        width: 100%;
     }
 }