diff --git a/assets/less/classes/header.less b/assets/less/classes/header.less
index e167c24a..f2f3f4d4 100644
--- a/assets/less/classes/header.less
+++ b/assets/less/classes/header.less
@@ -2,16 +2,12 @@
     --header-image-px: 60px;
     flex: 0 0 auto;
     transition: height .2s;
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 500;
 
-    &--new {
-        position: fixed;
-    }
-
     &--floating {
         --header-height: var(--header-height-floating);
         --header-image-px: 40px;
@@ -26,8 +22,13 @@
         background: var(--background-pattern);
         background-color: var(--header-accent-colour);
         background-blend-mode: multiply;
-        mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
-        -webkit-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
+        transition: box-shadow .2s, mask-image .2s, -webkit-mask-image .2s;
+    }
+
+    &:not(&--floating) &__background {
+        --header-background-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
+        mask-image: var(--header-background-mask-image);
+        -webkit-mask-image: var(--header-background-mask-image); // fuck chrome
     }
 
     &__wrapper {
diff --git a/assets/less/classes/headerv1.less b/assets/less/classes/headerv1.less
new file mode 100644
index 00000000..aa73c6b8
--- /dev/null
+++ b/assets/less/classes/headerv1.less
@@ -0,0 +1,291 @@
+.headerv1 {
+    --header-image-px: 60px;
+    flex: 0 0 auto;
+    transition: height .2s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 500;
+
+    &__background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--background-pattern);
+        background-color: var(--header-accent-colour);
+        background-blend-mode: multiply;
+        mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
+        -webkit-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
+    }
+
+    &__wrapper {
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        max-width: var(--site-max-width);
+        height: var(--header-height);
+        transition: height .2s;
+
+        @media (max-width: @site-mobile-width) {
+            flex-direction: column;
+            height: 100%;
+        }
+    }
+
+    @media (max-width: @site-mobile-width) {
+        &__icons {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+        }
+    }
+
+    &__icon {
+        display: none;
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+
+        &--menu {
+            font-size: 3em;
+            justify-content: center;
+            align-items: center;
+        }
+
+        @media (max-width: @site-mobile-width) {
+            display: inline-flex;
+        }
+    }
+
+    &__logo {
+        flex: 0 0 auto;
+        color: inherit;
+        text-decoration: none;
+        cursor: pointer;
+        display: block;
+        background: url('/images/logos/imouto-default.png') no-repeat center / cover;
+        width: var(--header-image-px);
+        height: var(--header-image-px);
+        font-size: 0;
+        transition: width .2s, height .2s;
+
+        &--manage {
+            background-image: url('/images/logos/imouto-broom.png');
+        }
+
+        @media (max-width: @site-mobile-width) {
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    &__menu {
+        flex: 1 1 auto;
+        margin: 0 6px;
+        list-style: none;
+        display: flex;
+
+        &-toggle {
+            display: none;
+        }
+
+        @media (max-width: @site-mobile-width) {
+            display: none;
+            font-size: 1.6em;
+            line-height: 1.5em;
+            margin-top: 4px;
+            width: 100%;
+            background: var(--header-accent-colour);
+
+            &-toggle:checked ~ .headerv1__menu {
+                display: block;
+            }
+
+            &__item:not(:last-child) {
+                border-bottom: 1px solid var(--header-accent-colour);
+            }
+
+            &__link {
+                width: 100%;
+                display: block;
+                padding: 4px 8px;
+                color: inherit;
+                text-decoration: none;
+            }
+        }
+
+        @media (min-width: @site-mobile-width) {
+            &__item {
+                text-align: center;
+                transition: background-color .2s, border-color .2s;
+                margin-right: 1px;
+                border: 1px solid transparent;
+                border-radius: 2px;
+
+                &:hover,
+                &:active,
+                &:focus,
+                &:focus-within {
+                    background-color: var(--background-colour-translucent-9);
+                    border-color: var(--header-accent-colour);
+
+                    .headerv1__submenu {
+                        transform: scaleY(1);
+                    }
+                }
+            }
+
+            &__link {
+                font-size: 1.2em;
+                color: inherit;
+                text-decoration: none;
+                display: block;
+                padding: 6px 4px;
+                min-width: 100px;
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__submenu {
+        list-style: none;
+        display: block;
+
+        @media (max-width: @site-mobile-width) {
+            &__link {
+                padding: 2px 16px;
+                display: block;
+                width: 100%;
+                color: inherit;
+                text-decoration: none;
+            }
+        }
+
+        @media (min-width: @site-mobile-width) {
+            position: absolute; // floating
+            left: -1px;
+            transform: scaleY(0);
+            transform-origin: center top 0;
+            background: var(--header-accent-colour);
+            overflow: hidden;
+            z-index: 100;
+            text-align: left;
+            box-shadow: 0 2px 2px var(--header-accent-colour);
+            transition: transform .2s;
+            padding: 1px;
+            border-radius: 2px;
+
+            &:hover,
+            &:focus {
+                transform: scaleY(1);
+            }
+
+            &__link {
+                color: inherit;
+                text-decoration: none;
+                display: block;
+                padding: 2px 6px;
+                min-width: 100px;
+                background-color: var(--background-colour-translucent-9);
+                transition: background-color .2s;
+
+                &:hover,
+                &:focus {
+                    background-color: var(--background-colour-translucent-7);
+                }
+
+                &:active {
+                    background-color: var(--background-colour-translucent-8);
+                }
+            }
+        }
+    }
+
+    &__user {
+        flex: 0 0 auto;
+        display: flex;
+        order: 3;
+        align-items: center;
+
+        @media (max-width: @site-mobile-width) {
+            justify-content: flex-end;
+        }
+
+        &-toggle {
+            display: none;
+        }
+
+        @media (max-width: @site-mobile-width) {
+            display: none;
+            width: 100%;
+            margin-top: 4px;
+
+            &-toggle:checked ~ .headerv1__user {
+                display: flex;
+            }
+        }
+
+        &__avatar {
+            width: var(--header-image-px);
+            height: var(--header-image-px);
+            margin-left: 5px;
+            transition: box-shadow .2s, width .2s, height .2s;
+            box-shadow: 0 0 4px #111;
+
+            &:hover,
+            &:active,
+            &:focus {
+                box-shadow: 0 0 4px var(--header-accent-colour);
+            }
+
+            @media (max-width: @site-mobile-width) {
+                display: none;
+            }
+        }
+
+        &__button {
+            margin: 2px;
+            color: inherit;
+            text-decoration: none;
+            font-size: 1.5em;
+            line-height: 32px;
+            width: 32px;
+            height: 32px;
+            transition: background-color .2s;
+            border-radius: 4px;
+            text-align: center;
+
+            &:hover,
+            &:focus {
+                background-color: fade(#fff, 20%);
+            }
+
+            &:active {
+                background-color: fade(#fff, 10%);
+            }
+
+            @media (max-width: @site-mobile-width) {
+                width: 40px;
+                height: 40px;
+                line-height: 40px;
+                font-size: 2em;
+            }
+
+            &__count {
+                position: absolute;
+                bottom: 1px;
+                right: 1px;
+                font-size: 10px;
+                background-color: var(--header-accent-colour);
+                opacity: .9;
+                border-radius: 4px;
+                line-height: 12px;
+                padding: 2px 4px;
+            }
+        }
+    }
+}
diff --git a/assets/less/main.less b/assets/less/main.less
index f76c7e2e..28cb4750 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -6,8 +6,9 @@
 
 :root {
     --site-max-width: 1200px;
-    --header-height: 70px;
+    --header-height-static: 70px;
     --header-height-floating: 50px;
+    --header-height: var(--header-height-static);
 
     --background-image: initial;
 
@@ -120,6 +121,7 @@ html {
 // Specific styles
 @import "classes/footer";
 @import "classes/header";
+@import "classes/headerv1";
 @import "classes/index";
 @import "classes/permissions";
 @import "classes/auth";
diff --git a/assets/typescript/misuzu.ts b/assets/typescript/misuzu.ts
index 6043ca6e..1c888ef8 100644
--- a/assets/typescript/misuzu.ts
+++ b/assets/typescript/misuzu.ts
@@ -47,18 +47,22 @@ window.addEventListener('load', () => {
     const siteHeader: HTMLDivElement = document.querySelector('.js-header');
 
     if (siteHeader) {
-        const siteHeaderFloating: string = 'header--floating';
-
-        window.addEventListener('scroll', () => {
-            if (scrollY > 0 && !siteHeader.classList.contains(siteHeaderFloating)) {
-                siteHeader.classList.add(siteHeaderFloating);
-            } else if (scrollY <= 1 && siteHeader.classList.contains(siteHeaderFloating)) {
-                siteHeader.classList.remove(siteHeaderFloating);
-            }
-        });
+        window.addEventListener('scroll', () => updateHeader(siteHeader));
+        updateHeader(siteHeader); // initial call to bring it in the right state
     }
 });
 
+function updateHeader(element: HTMLDivElement): void
+{
+    const floating: string = 'header--floating';
+
+    if (scrollY > 10 && !element.classList.contains(floating)) {
+        element.classList.add(floating);
+    } else if (scrollY < 10 && element.classList.contains(floating)) {
+        element.classList.remove(floating);
+    }
+}
+
 function loginFormUpdateAvatar(avatarElement: HTMLElement, usernameElement: HTMLInputElement, force: boolean = false): void {
     if (!force) {
         if (loginFormAvatarTimeout)
diff --git a/templates/_layout/header-old.twig b/templates/_layout/header-old.twig
index 9cceb620..2d0aff79 100644
--- a/templates/_layout/header-old.twig
+++ b/templates/_layout/header-old.twig
@@ -1,87 +1,87 @@
 {% from '_layout/input.twig' import input_checkbox_raw %}
 {% set in_manage = manage_menu is defined %}
 
-<nav class="header">
-    <div class="header__background"></div>
-    <div class="header__wrapper">
-        <div class="header__icons">
-            <label class="header__icon header__icon--menu" for="toggle-mobile-header-menu">
+<nav class="headerv1">
+    <div class="headerv1__background"></div>
+    <div class="headerv1__wrapper">
+        <div class="headerv1__icons">
+            <label class="headerv1__icon headerv1__icon--menu" for="toggle-mobile-header-menu">
                 <i class="fas fa-bars"></i>
             </label>
 
-            <a class="header__logo{% if in_manage %} header__logo--manage{% endif %}" href="/">
+            <a class="headerv1__logo{% if in_manage %} headerv1__logo--manage{% endif %}" href="/">
                 {{ globals.site_name }}
             </a>
 
             <label style="background-image:url('/profile.php?u={{ current_user.user_id|default(0) }}&amp;m=avatar');"
-                class="avatar header__icon header__icon--user"
+                class="avatar headerv1__icon headerv1__icon--user"
                 for="toggle-mobile-header-user"></label>
         </div>
         {# set user_is_tester = current_user.general_perms|default(0)|perms_check(constant('MSZ_PERM_GENERAL_TESTER')) #}
 
-        {{ input_checkbox_raw('', false, 'header__menu-toggle', '', false, {'id':'toggle-mobile-header-menu'}) }}
-        <ul class="header__menu">
-            <li class="header__menu__item">
-                <a href="/" class="header__menu__link">Home</a>
-                <ul class="header__submenu">
-                    <li class="header__submenu__item"><a href="/members.php" class="header__submenu__link">Members</a></li>
-                    <li class="header__submenu__item"><a href="/changelog.php" class="header__submenu__link">Changelog</a></li>
-                    <li class="header__submenu__item"><a href="/info.php/contact" class="header__submenu__link">Contact</a></li>
-                    <li class="header__submenu__item"><a href="/info.php/rules" class="header__submenu__link">Rules</a></li>
-                    <li class="header__submenu__item"><a href="https://twitter.com/flashiinet" class="header__submenu__link">Twitter</a></li>
+        {{ input_checkbox_raw('', false, 'headerv1__menu-toggle', '', false, {'id':'toggle-mobile-header-menu'}) }}
+        <ul class="headerv1__menu">
+            <li class="headerv1__menu__item">
+                <a href="/" class="headerv1__menu__link">Home</a>
+                <ul class="headerv1__submenu">
+                    <li class="headerv1__submenu__item"><a href="/members.php" class="headerv1__submenu__link">Members</a></li>
+                    <li class="headerv1__submenu__item"><a href="/changelog.php" class="headerv1__submenu__link">Changelog</a></li>
+                    <li class="headerv1__submenu__item"><a href="/info.php/contact" class="headerv1__submenu__link">Contact</a></li>
+                    <li class="headerv1__submenu__item"><a href="/info.php/rules" class="headerv1__submenu__link">Rules</a></li>
+                    <li class="headerv1__submenu__item"><a href="https://twitter.com/flashiinet" class="headerv1__submenu__link">Twitter</a></li>
                 </ul>
             </li>
-            <li class="header__menu__item"><a href="/news.php" class="header__menu__link">News</a></li>
-            <li class="header__menu__item">
-                <a href="/forum/" class="header__menu__link">Forum</a>
-                {#<ul class="header__submenu">
-                    <li class="header__submenu__item"><a href="#" class="header__submenu__link">Unanswered Posts</a></li>
-                    <li class="header__submenu__item"><a href="#" class="header__submenu__link">New Posts</a></li>
-                    <li class="header__submenu__item"><a href="#" class="header__submenu__link">Your Posts</a></li>
+            <li class="headerv1__menu__item"><a href="/news.php" class="headerv1__menu__link">News</a></li>
+            <li class="headerv1__menu__item">
+                <a href="/forum/" class="headerv1__menu__link">Forum</a>
+                {#<ul class="headerv1__submenu">
+                    <li class="headerv1__submenu__item"><a href="#" class="headerv1__submenu__link">Unanswered Posts</a></li>
+                    <li class="headerv1__submenu__item"><a href="#" class="headerv1__submenu__link">New Posts</a></li>
+                    <li class="headerv1__submenu__item"><a href="#" class="headerv1__submenu__link">Your Posts</a></li>
                 </ul>#}
             </li>
-            <li class="header__menu__item"><a href="https://chat.flashii.net" class="header__menu__link">Chat</a></li>
+            <li class="headerv1__menu__item"><a href="https://chat.flashii.net" class="headerv1__menu__link">Chat</a></li>
         </ul>
 
-        {{ input_checkbox_raw('', false, 'header__user-toggle', '', false, {'id':'toggle-mobile-header-user'}) }}
-        <div class="header__user">
+        {{ input_checkbox_raw('', false, 'headerv1__user-toggle', '', false, {'id':'toggle-mobile-header-user'}) }}
+        <div class="headerv1__user">
             {% if current_user is defined %}
-                <a href="/profile.php?u={{ current_user.user_id }}" title="Profile" class="header__user__button">
+                <a href="/profile.php?u={{ current_user.user_id }}" title="Profile" class="headerv1__user__button">
                     <i class="fas fa-user fa-fw"></i>
                 </a>
 
-                <a href="/settings.php" title="Settings" class="header__user__button">
+                <a href="/settings.php" title="Settings" class="headerv1__user__button">
                     <i class="fas fa-cog fa-fw"></i>
                 </a>
 
                 {% if has_manage_access %}
                     {% if in_manage %}
-                        <a href="{{ site_link|default('/') }}" title="Return to the Site" class="header__user__button">
+                        <a href="{{ site_link|default('/') }}" title="Return to the Site" class="headerv1__user__button">
                             <i class="fas fa-door-open fa-fw"></i>
                         </a>
                     {% else %}
-                        <a href="{{ manage_link|default('/manage/index.php') }}" title="Enter Manage" class="header__user__button">
+                        <a href="{{ manage_link|default('/manage/index.php') }}" title="Enter Manage" class="headerv1__user__button">
                             <i class="fas fa-door-closed fa-fw"></i>
                         </a>
                     {% endif %}
                 {% endif %}
 
-                <a href="/auth.php?m=logout&amp;s={{ csrf_token('logout') }}" title="Log out" class="header__user__button">
+                <a href="/auth.php?m=logout&amp;s={{ csrf_token('logout') }}" title="Log out" class="headerv1__user__button">
                     <i class="fas fa-sign-out-alt fa-fw"></i>
                 </a>
 
-                <a href="/profile.php?u={{ current_user.user_id }}" class="avatar header__user__avatar"
+                <a href="/profile.php?u={{ current_user.user_id }}" class="avatar headerv1__user__avatar"
                     style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');" title="{{ current_user.username }}"></a>
             {% else %}
-                <a href="/auth.php?m=register" title="Register" class="header__user__button">
+                <a href="/auth.php?m=register" title="Register" class="headerv1__user__button">
                     <i class="fas fa-user-plus fa-fw"></i>
                 </a>
 
-                <a href="/auth.php?m=login" title="Log in" class="header__user__button">
+                <a href="/auth.php?m=login" title="Log in" class="headerv1__user__button">
                     <i class="fas fa-sign-in-alt fa-fw"></i>
                 </a>
 
-                <a href="/auth.php?m=login" class="avatar header__user__avatar"
+                <a href="/auth.php?m=login" class="avatar headerv1__user__avatar"
                     style="background-image:url('/profile.php?m=avatar');"></a>
             {% endif %}
         </div>
diff --git a/templates/_layout/header.twig b/templates/_layout/header.twig
index e254a238..a1b1ceb9 100644
--- a/templates/_layout/header.twig
+++ b/templates/_layout/header.twig
@@ -2,7 +2,6 @@
 {% set in_manage = manage_menu is defined %}
 
 <nav class="header header--new js-header">
-    <div class="header__filler"></div>
     <div class="header__background"></div>
     <div class="header__wrapper">
         <div class="header__icons">