diff --git a/src/components/Nav/Header.scss b/src/components/Nav/Header.scss
index ef8da045..91592c9c 100644
--- a/src/components/Nav/Header.scss
+++ b/src/components/Nav/Header.scss
@@ -1,13 +1,31 @@
 header {
+  background: #fff;
   margin-bottom: 2.2rem;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 10;
 
   .wide-container {
+    background: #fff;
+
     @include media-breakpoint-down(sm) {
       padding: 0 divide($container-padding-x, 2);
     }
   }
 }
 
+.header--scrolled-bottom,
+.header--scrolled-top {
+  .main-logo {
+    height: 56px;
+
+    img {
+      height: 20px;
+    }
+  }
+}
+
 .header__inner {
   background: #fff;
   border-bottom: 4px solid #000;
@@ -35,8 +53,9 @@ header {
   display: inline-flex;
   height: 70px;
   padding: 0 $container-padding-x 0 0;
-  text-align: center;
   position: relative;
+  transition: height 0.2s;
+  text-align: center;
   z-index: 9;
 
   @include media-breakpoint-up(lg) {
@@ -44,6 +63,10 @@ header {
   }
 
   img {
+    height: 32px;
+    object-fit: contain;
+    object-position: left;
+    transition: height 0.2s;
     vertical-align: middle;
     width: 100px;
 
@@ -79,40 +102,51 @@ nav {
 }
 
 .main-navigation {
-  display: inline-flex;
+  position: relative;
   @include font-size(1.7rem);
 
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  ul {
+    display: inline-flex;
+    list-style: none;
+    margin: 0;
+    opacity: 1;
+    padding: 0;
+    transition: opacity 0.3s;
 
-  @include media-breakpoint-down(md) {
-    background: #fff;
-    bottom: 0;
-    display: none;
-    font-size: 2.6rem;
-    font-weight: bold;
-    left: 0;
-    padding: $container-padding-x;
-    position: fixed;
-    top: 74px;
-    width: 100%;
-    z-index: 1;
+    @include media-breakpoint-down(md) {
+      background: #fff;
+      bottom: 0;
+      display: none;
+      font-size: 2.6rem;
+      font-weight: bold;
+      left: 0;
+      padding: $container-padding-x;
+      position: fixed;
+      top: 74px;
+      width: 100%;
+      z-index: 1;
 
-    li {
-      margin-bottom: 2.4rem;
+      li {
+        margin-bottom: 2.4rem;
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      padding: divide($container-padding-x, 2);
+    }
+
+    .header--scrolled-bottom & {
+      opacity: 0;
     }
   }
 
-  @include media-breakpoint-down(sm) {
-    padding: divide($container-padding-x, 2);
-  }
-
   &.fixed {
-    display: inline-flex;
+    ul {
+      display: inline-flex;
 
-    @include media-breakpoint-down(lg) {
-      display: block !important;
+      @include media-breakpoint-down(lg) {
+        display: block !important;
+      }
     }
   }
 
@@ -127,8 +161,8 @@ nav {
   .selected a {
     border-bottom: 2px solid;
     color: #000;
-    pointer-events: none;
     cursor: default;
+    pointer-events: none;
   }
 }
 
@@ -208,3 +242,24 @@ nav {
     }
   }
 }
+
+.article-header {
+  @include font-size(1.4rem);
+
+  left: 0;
+  margin: 0.2em;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  transition: opacity 0.3s, z-index 0s 0.3s;
+  white-space: nowrap;
+  width: 100%;
+  z-index: -1;
+
+  .header--scrolled-bottom & {
+    transition: opacity 0.3s;
+    opacity: 1;
+    z-index: 1;
+  }
+}
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index ea8b1fc5..c1478d98 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -1,4 +1,4 @@
-import { For, Show, createSignal, createMemo, createEffect } from 'solid-js'
+import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js'
 import Private from './Private'
 import Notifications from './Notifications'
 import Icon from './Icon'
@@ -20,6 +20,8 @@ const resources = [
 
 export const Header = () => {
   // signals
+  const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
+  const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
   const [visibleWarnings, setVisibleWarnings] = createSignal(false)
   // stores
@@ -58,8 +60,28 @@ export const Header = () => {
     handleClientRouteLinkClick(ev)
   }
 
+  onMount(() => {
+    let scrollTop = window.scrollY
+
+    const handleScroll = () => {
+      setIsScrollingBottom(window.scrollY > scrollTop)
+      setIsScrolled(window.scrollY > 0)
+      scrollTop = window.scrollY
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    onCleanup(() => {
+      window.removeEventListener('scroll', handleScroll)
+    })
+  })
+
   return (
-    <header>
+    <header
+      classList={{
+        ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
+        ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
+      }}
+    >
       <Modal name="auth">
         <AuthModal />
       </Modal>
@@ -70,17 +92,25 @@ export const Header = () => {
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
-            <For each={resources}>
-              {(r: { href: string; name: string }) => (
-                <li classList={{ selected: r.href === subpath() }}>
-                  <a href={r.href} onClick={handleClientRouteLinkClick}>
-                    {r.name}
-                  </a>
-                </li>
-              )}
-            </For>
-          </ul>
+          <div class="col main-navigation">
+            {/*FIXME article header*/}
+            <div class="article-header">
+              Дискурс — независимый художественно-аналитический журнал с горизонтальной редакцией,
+              основанный на принципах свободы слова, прямой демократии и совместного редактирования.
+            </div>
+
+            <ul class="text-xl inline-flex" classList={{ fixed: fixed() }}>
+              <For each={resources}>
+                {(r: { href: string; name: string }) => (
+                  <li classList={{ selected: r.href === subpath() }}>
+                    <a href={r.href} onClick={handleClientRouteLinkClick}>
+                      {r.name}
+                    </a>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </div>
           <div class="usernav">
             <div class="usercontrol col">
               <div class="usercontrol__item">
diff --git a/src/components/Nav/Topics.scss b/src/components/Nav/Topics.scss
index 4f805803..63c078e4 100644
--- a/src/components/Nav/Topics.scss
+++ b/src/components/Nav/Topics.scss
@@ -1,7 +1,11 @@
 .subnavigation {
   @include font-size(1.5rem);
 
-  margin-bottom: 2.4rem;
+  height: 3em;
+  line-height: 3em;
+  margin-bottom: 1.2rem !important;
+  overflow: hidden;
+  position: relative;
 
   @include media-breakpoint-down(sm) {
     padding: 0 divide($container-padding-x, 2);
@@ -10,6 +14,7 @@
   .topics {
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
     list-style: none;
     margin-right: 2.2rem;
     padding: 0;
diff --git a/src/layouts/zine.astro b/src/layouts/zine.astro
index 1726abb1..1d3666e7 100644
--- a/src/layouts/zine.astro
+++ b/src/layouts/zine.astro
@@ -23,7 +23,7 @@ const locale = useStore(langstore)
       <title>{t('Discours')}</title>
     </head>
     <body>
-      <Header />
+      <Header client:load />
       <main class="main-content">
         <Suspense>
           <slot />
diff --git a/src/styles/app.scss b/src/styles/app.scss
index f98964bf..b78be650 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -33,7 +33,7 @@ body {
   font-family: Muller, Arial, Helvetica, sans-serif;
   font-size: 2rem;
   line-height: 1.4;
-  height: 100%;
+  min-height: 100%;
   text-size-adjust: 100%;
 
   &.fixed {
@@ -533,6 +533,7 @@ figcaption {
 
 .main-content {
   flex: 1 100%;
+  padding-top: 100px;
   transition: all 1s ease;
 }