diff --git a/src/components/Nav/Header.scss b/src/components/Nav/Header.scss
index c2a0917b..91592c9c 100644
--- a/src/components/Nav/Header.scss
+++ b/src/components/Nav/Header.scss
@@ -1,7 +1,9 @@
 header {
+  background: #fff;
   margin-bottom: 2.2rem;
-  position: sticky;
+  position: fixed;
   top: 0;
+  width: 100%;
   z-index: 10;
 
   .wide-container {
@@ -13,6 +15,17 @@ header {
   }
 }
 
+.header--scrolled-bottom,
+.header--scrolled-top {
+  .main-logo {
+    height: 56px;
+
+    img {
+      height: 20px;
+    }
+  }
+}
+
 .header__inner {
   background: #fff;
   border-bottom: 4px solid #000;
@@ -40,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) {
@@ -49,6 +63,10 @@ header {
   }
 
   img {
+    height: 32px;
+    object-fit: contain;
+    object-position: left;
+    transition: height 0.2s;
     vertical-align: middle;
     width: 100px;
 
@@ -84,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;
+      }
     }
   }
 
@@ -132,8 +161,8 @@ nav {
   .selected a {
     border-bottom: 2px solid;
     color: #000;
-    pointer-events: none;
     cursor: default;
+    pointer-events: none;
   }
 }
 
@@ -213,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 263d2b1b..b9f30a00 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -10,6 +10,7 @@ import { useStore } from '@nanostores/solid'
 import { session as ssession } from '../../stores/auth'
 import { route, router } from '../../stores/router'
 import './Header.scss'
+import { Shout } from '../../graphql/types.gen'
 
 const resources = [
   { name: t('zine'), href: '/' },
@@ -18,9 +19,10 @@ const resources = [
   //{ name: t('community'), href: '/community' }
 ]
 
-export const Header = () => {
+export const Header = (props: Shout) => {
   // signals
   const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
+  const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
   const [visibleWarnings, setVisibleWarnings] = createSignal(false)
   // stores
@@ -46,13 +48,12 @@ export const Header = () => {
   const enterClick = route(() => showModal('auth'))
   const bellClick = createMemo(() => (authorized() ? route(toggleWarnings) : enterClick))
 
-  const root = null
-
   onMount(() => {
     let scrollTop = window.scrollY
 
     const handleScroll = () => {
       setIsScrollingBottom(window.scrollY > scrollTop)
+      setIsScrolled(window.scrollY > 0)
       scrollTop = window.scrollY
     }
 
@@ -65,8 +66,8 @@ export const Header = () => {
   return (
     <header
       classList={{
-        ['header--scrolled-top']: !getIsScrollingBottom(),
-        ['header--scrolled-bottom']: getIsScrollingBottom()
+        ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
+        ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
       }}
     >
       <Modal name="auth">
@@ -79,17 +80,24 @@ 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={route}>
-                    {r.name}
-                  </a>
-                </li>
-              )}
-            </For>
-          </ul>
+          <div class="col main-navigation">
+            <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={route}>
+                      {r.name}
+                    </a>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </div>
           <div class="usernav">
             <div class="usercontrol col">
               <div class="usercontrol__item">
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 69468684..b78be650 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -533,6 +533,7 @@ figcaption {
 
 .main-content {
   flex: 1 100%;
+  padding-top: 100px;
   transition: all 1s ease;
 }