diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx
index 9a2a76d850..3557cb15a8 100644
--- a/src/components/HamburgerMenu/index.tsx
+++ b/src/components/HamburgerMenu/index.tsx
@@ -1,33 +1,46 @@
 import cn from 'classnames'
-import React, { useCallback, useState, useEffect } from 'react'
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  MouseEvent,
+  KeyboardEvent
+} from 'react'
 
 import HamburgerIcon from '../HamburgerIcon'
 import Link from '../Link'
-
 import { logEvent } from '../../utils/front/ga'
+
 import { getFirstPage } from '../../utils/shared/sidebar'
 import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
 import { ReactComponent as TwitterIcon } from '../SocialIcon/twitter.svg'
 import { ReactComponent as GithubIcon } from '../SocialIcon/github.svg'
-import { useHeaderIsScrolled } from '../../utils/front/scroll'
 
 import styles from './styles.module.css'
 
 const docsPage = getFirstPage()
 
-const HamburgerMenu: React.FC = () => {
-  const [isOpened, setOpened] = useState(false)
-  const collapsed = useHeaderIsScrolled()
+export type HamburgerHelpers = {
+  opened: boolean
+  setOpened: (newState: boolean) => void
+  handleToggle: () => void
+  handleKeyDown: (e: KeyboardEvent) => void
+  handleClose: () => void
+  handleItemClick: (name: string) => (e: MouseEvent) => void
+}
+
+export const useHamburgerMenu: () => HamburgerHelpers = () => {
+  const [opened, setOpened] = useState(false)
 
-  const toggleMobileMenu = useCallback(() => setOpened(!isOpened), [isOpened])
-  const openOnEnterKey = useCallback(e => {
+  const handleToggle = useCallback(() => setOpened(!opened), [opened])
+  const handleKeyDown = useCallback(e => {
     if (e.which === 13) {
-      toggleMobileMenu()
+      handleToggle()
     }
   }, [])
 
-  const close = useCallback(() => setOpened(false), [isOpened])
-  const itemClick = useCallback(
+  const handleClose = useCallback(() => setOpened(false), [opened])
+  const handleItemClick = useCallback(
     item => (): void => {
       close()
       logEvent('hamburger', item)
@@ -36,197 +49,217 @@ const HamburgerMenu: React.FC = () => {
   )
 
   useEffect(() => {
-    const method = isOpened ? 'add' : 'remove'
-
+    const method = opened ? 'add' : 'remove'
     document.body.classList[method](styles.hiddenScrollbar)
-  }, [isOpened])
+  }, [opened])
 
-  return (
-    <div>
-      <button
-        className={cn(styles.toggleButton, collapsed || styles.expanded)}
-        onClick={toggleMobileMenu}
-        onKeyDown={openOnEnterKey}
-        aria-label="Toggle Mobile Menu"
-      >
-        <HamburgerIcon opened={isOpened} />
-      </button>
+  return {
+    opened,
+    setOpened,
+    handleToggle,
+    handleKeyDown,
+    handleClose,
+    handleItemClick
+  }
+}
 
-      <div className={cn(styles.wrapper, isOpened && styles.opened)}>
-        <div className={styles.logoRow}>
-          <Link href="/" className={styles.logo} aria-label="Home">
-            <LogoSVG />
-          </Link>
-        </div>
-        <ul className={styles.sections}>
-          <li className={styles.section}>
-            <Link
-              href="/features"
-              className={styles.sectionLink}
-              onClick={itemClick('features')}
-            >
-              Features
-            </Link>
-          </li>
-          <li className={styles.section}>
-            <Link
-              href={docsPage}
-              className={styles.sectionLink}
-              onClick={itemClick('doc')}
-            >
-              Doc
-            </Link>
-          </li>
-          <li className={styles.section}>
-            <Link
-              href="/blog"
-              className={styles.sectionLink}
-              onClick={itemClick('blog')}
-            >
-              Blog
-            </Link>
-          </li>
-          <li className={styles.section}>
-            <Link
-              href="/community"
-              className={styles.sectionLink}
-              onClick={itemClick('community')}
-            >
-              Community
-            </Link>
-            <ul className={styles.subSections}>
-              <li className={styles.subSection}>
-                <Link
-                  href="/community#meet"
-                  className={styles.subSectionLink}
-                  onClick={itemClick('community')}
-                >
-                  <img
-                    className={styles.subSectionLinkImage}
-                    src="/img/community/icon-community.svg"
-                    alt=""
-                  />
-                  <span className={styles.subSectionLinkTitle}>Meet Us</span>
-                </Link>
-              </li>
-              <li className={styles.subSection}>
-                <Link
-                  href="/community#contribute"
-                  className={styles.subSectionLink}
-                  onClick={itemClick('community')}
-                >
-                  <img
-                    className={styles.subSectionLinkImage}
-                    src="/img/community/icon-contribute.svg"
-                    alt=""
-                  />
-                  <span className={styles.subSectionLinkTitle}>Contribute</span>
-                </Link>
-              </li>
-              <li className={styles.subSection}>
-                <Link
-                  href="/community#learn"
-                  className={styles.subSectionLink}
-                  onClick={itemClick('community')}
-                >
-                  <img
-                    className={styles.subSectionLinkImage}
-                    src="/img/community/icon-learn.svg"
-                    alt=""
-                  />
-                  <span className={styles.subSectionLinkTitle}>Learn</span>
-                </Link>
-              </li>
-              <li className={styles.subSection}>
-                <Link
-                  href="/community#events"
-                  className={styles.subSectionLink}
-                  onClick={itemClick('community')}
-                >
-                  <img
-                    className={styles.subSectionLinkImage}
-                    src="/img/community/icon-events.svg"
-                    alt=""
-                  />
-                  <span className={styles.subSectionLinkTitle}>Events</span>
-                </Link>
-              </li>
-            </ul>
-          </li>
-          <li className={styles.section}>
-            <Link
-              href="/support"
-              className={styles.sectionLink}
-              onClick={itemClick('support')}
-            >
-              Support
-            </Link>
-            <ul className={styles.subSections}>
-              <li className={styles.subSection}>
-                <Link
-                  className={styles.subSectionLink}
-                  href="mailto:support@dvc.org"
-                  target="_blank"
-                  onClick={itemClick('mail')}
-                >
-                  <img
-                    className={styles.subSectionLinkImage}
-                    src="/img/community/icon-mail.svg"
-                    alt=""
-                  />
-                  <span className={styles.subSectionLinkTitle}>E-Mail</span>
-                </Link>
-              </li>
-              <li className={styles.subSection}>
-                <Link
-                  className={styles.subSectionLink}
-                  href="https://github.com/iterative/dvc"
-                  onClick={itemClick('github')}
-                  target="_blank"
-                >
-                  <GithubIcon className={styles.subSectionLinkImage} />
-                  <span className={styles.subSectionLinkTitle}>GitHub</span>
-                </Link>
-              </li>
-              <li className={styles.subSection}>
-                <Link
-                  className={styles.subSectionLink}
-                  href="/chat"
-                  onClick={itemClick('chat')}
-                  target="_blank"
-                >
-                  <img
-                    className={styles.subSectionLinkImage}
-                    src="/img/community/icon-discord.svg"
-                    alt=""
-                  />
-                  <span className={styles.subSectionLinkTitle}>Discord</span>
-                </Link>
-              </li>
-              <li className={styles.subSection}>
-                <Link
-                  className={styles.subSectionLink}
-                  href="https://twitter.com/DVCorg"
-                  onClick={itemClick('twitter')}
-                  target="_blank"
-                >
-                  <TwitterIcon className={styles.subSectionLinkImage} />
-                  <span className={styles.subSectionLinkTitle}>Twitter</span>
-                </Link>
-              </li>
-            </ul>
-          </li>
-        </ul>
-        <Link
-          href="/doc/start"
-          className={styles.linkButton}
-          onClick={itemClick('get-started')}
-        >
-          Get started
+export const HamburgerMenu: React.FC<
+  Pick<
+    HamburgerHelpers,
+    'opened' | 'handleItemClick' | 'handleKeyDown' | 'handleToggle'
+  > & {
+    collapsed: boolean
+  }
+> = ({ opened, handleItemClick }) => {
+  return (
+    <div className={cn(styles.wrapper, opened && styles.opened)}>
+      <div className={styles.logoRow}>
+        <Link href="/" className={styles.logo} aria-label="Home">
+          <LogoSVG />
         </Link>
       </div>
+      <ul className={styles.sections}>
+        <li className={styles.section}>
+          <Link
+            href="/features"
+            className={styles.sectionLink}
+            onClick={handleItemClick('features')}
+          >
+            Features
+          </Link>
+        </li>
+        <li className={styles.section}>
+          <Link
+            href={docsPage}
+            className={styles.sectionLink}
+            onClick={handleItemClick('doc')}
+          >
+            Doc
+          </Link>
+        </li>
+        <li className={styles.section}>
+          <Link
+            href="/blog"
+            className={styles.sectionLink}
+            onClick={handleItemClick('blog')}
+          >
+            Blog
+          </Link>
+        </li>
+        <li className={styles.section}>
+          <Link
+            href="/community"
+            className={styles.sectionLink}
+            onClick={handleItemClick('community')}
+          >
+            Community
+          </Link>
+          <ul className={styles.subSections}>
+            <li className={styles.subSection}>
+              <Link
+                href="/community#meet"
+                className={styles.subSectionLink}
+                onClick={handleItemClick('community')}
+              >
+                <img
+                  className={styles.subSectionLinkImage}
+                  src="/img/community/icon-community.svg"
+                  alt=""
+                />
+                <span className={styles.subSectionLinkTitle}>Meet Us</span>
+              </Link>
+            </li>
+            <li className={styles.subSection}>
+              <Link
+                href="/community#contribute"
+                className={styles.subSectionLink}
+                onClick={handleItemClick('community')}
+              >
+                <img
+                  className={styles.subSectionLinkImage}
+                  src="/img/community/icon-contribute.svg"
+                  alt=""
+                />
+                <span className={styles.subSectionLinkTitle}>Contribute</span>
+              </Link>
+            </li>
+            <li className={styles.subSection}>
+              <Link
+                href="/community#learn"
+                className={styles.subSectionLink}
+                onClick={handleItemClick('community')}
+              >
+                <img
+                  className={styles.subSectionLinkImage}
+                  src="/img/community/icon-learn.svg"
+                  alt=""
+                />
+                <span className={styles.subSectionLinkTitle}>Learn</span>
+              </Link>
+            </li>
+            <li className={styles.subSection}>
+              <Link
+                href="/community#events"
+                className={styles.subSectionLink}
+                onClick={handleItemClick('community')}
+              >
+                <img
+                  className={styles.subSectionLinkImage}
+                  src="/img/community/icon-events.svg"
+                  alt=""
+                />
+                <span className={styles.subSectionLinkTitle}>Events</span>
+              </Link>
+            </li>
+          </ul>
+        </li>
+        <li className={styles.section}>
+          <Link
+            href="/support"
+            className={styles.sectionLink}
+            onClick={handleItemClick('support')}
+          >
+            Support
+          </Link>
+          <ul className={styles.subSections}>
+            <li className={styles.subSection}>
+              <Link
+                className={styles.subSectionLink}
+                href="mailto:support@dvc.org"
+                target="_blank"
+                onClick={handleItemClick('mail')}
+              >
+                <img
+                  className={styles.subSectionLinkImage}
+                  src="/img/community/icon-mail.svg"
+                  alt=""
+                />
+                <span className={styles.subSectionLinkTitle}>E-Mail</span>
+              </Link>
+            </li>
+            <li className={styles.subSection}>
+              <Link
+                className={styles.subSectionLink}
+                href="https://github.com/iterative/dvc"
+                onClick={handleItemClick('github')}
+                target="_blank"
+              >
+                <GithubIcon className={styles.subSectionLinkImage} />
+                <span className={styles.subSectionLinkTitle}>GitHub</span>
+              </Link>
+            </li>
+            <li className={styles.subSection}>
+              <Link
+                className={styles.subSectionLink}
+                href="/chat"
+                onClick={handleItemClick('chat')}
+                target="_blank"
+              >
+                <img
+                  className={styles.subSectionLinkImage}
+                  src="/img/community/icon-discord.svg"
+                  alt=""
+                />
+                <span className={styles.subSectionLinkTitle}>Discord</span>
+              </Link>
+            </li>
+            <li className={styles.subSection}>
+              <Link
+                className={styles.subSectionLink}
+                href="https://twitter.com/DVCorg"
+                onClick={handleItemClick('twitter')}
+                target="_blank"
+              >
+                <TwitterIcon className={styles.subSectionLinkImage} />
+                <span className={styles.subSectionLinkTitle}>Twitter</span>
+              </Link>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <Link
+        href="/doc/start"
+        className={styles.linkButton}
+        onClick={handleItemClick('get-started')}
+      >
+        Get started
+      </Link>
     </div>
   )
 }
 
-export default HamburgerMenu
+export const HamburgerButton: React.FC<{
+  opened: boolean
+  collapsed: boolean
+  handleClick: (e: MouseEvent) => void
+  handleKeyDown: (e: KeyboardEvent) => void
+}> = ({ opened, collapsed, handleClick, handleKeyDown }) => (
+  <button
+    className={cn(styles.toggleButton, collapsed || styles.expanded)}
+    onClick={handleClick}
+    onKeyDown={handleKeyDown}
+    aria-label="Toggle Mobile Menu"
+  >
+    <HamburgerIcon opened={opened} />
+  </button>
+)
diff --git a/src/components/LayoutHeader/alert.tsx b/src/components/LayoutHeader/alert.tsx
new file mode 100644
index 0000000000..4c3efeb05e
--- /dev/null
+++ b/src/components/LayoutHeader/alert.tsx
@@ -0,0 +1,25 @@
+import cn from 'classnames'
+import React from 'react'
+
+import { ReactComponent as GitHubIcon } from '../SocialIcon/github.svg'
+import Link from '../Link'
+
+import styles from './styles.module.css'
+
+const LayoutAlert: React.FC<{ collapsed: boolean }> = ({ collapsed }) => (
+  <div className={cn(styles.alert, collapsed && styles.collapsed)}>
+    <span role="img" aria-label="rocket">
+      🚀
+    </span>{' '}
+    Check out our newest tool, <Link href="https://cml.dev">CML</Link>!{' '}
+    <Link
+      className={styles.gitHubAlertLink}
+      href="https://github.com/iterative/cml"
+      title="Star us on GitHub!"
+    >
+      <GitHubIcon width="1em" height="1em" viewBox="5 5 30 30" />
+    </Link>
+  </div>
+)
+
+export default LayoutAlert
diff --git a/src/components/LayoutHeader/index.tsx b/src/components/LayoutHeader/index.tsx
index b8efa526c6..92d00ffd8b 100644
--- a/src/components/LayoutHeader/index.tsx
+++ b/src/components/LayoutHeader/index.tsx
@@ -3,61 +3,74 @@ import React from 'react'
 import includes from 'lodash/includes'
 
 import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
-import { ReactComponent as GitHubIcon } from '../SocialIcon/github.svg'
 import LayoutWidthContainer from '../LayoutWidthContainer'
 import Link from '../Link'
 import Nav from './Nav'
+import {
+  HamburgerMenu,
+  HamburgerButton,
+  useHamburgerMenu
+} from '../HamburgerMenu'
 
 import { useHeaderIsScrolled } from '../../utils/front/scroll'
 import { ReactComponent as LogoSVG } from '../../../static/img/logo.svg'
 import styles from './styles.module.css'
 
+import LayoutAlert from './alert'
+
 const LayoutHeader: React.FC<Required<ILayoutModifiable>> = ({ modifiers }) => {
+  const {
+    opened,
+    handleToggle,
+    handleKeyDown,
+    handleItemClick
+  } = useHamburgerMenu()
+  const scrolled = useHeaderIsScrolled()
   const hasCollapsedModifier = includes(modifiers, LayoutModifiers.Collapsed)
-  const collapsed = hasCollapsedModifier || useHeaderIsScrolled()
+  const collapsed = opened || hasCollapsedModifier || scrolled
 
   return (
-    <header
-      className={styles.wrapper}
-      id="header"
-      data-collapsed={hasCollapsedModifier}
-    >
-      <div
-        className={cn(
-          styles.placeholder,
-          hasCollapsedModifier && styles.collapsed
-        )}
-      />
-      <div className={styles.header}>
-        <div className={cn(styles.alert, collapsed && styles.collapsed)}>
-          <span role="img" aria-label="rocket">
-            🚀
-          </span>{' '}
-          Check out our newest tool, <Link href="https://cml.dev">CML</Link>!{' '}
-          <Link
-            className={styles.gitHubAlertLink}
-            href="https://github.com/iterative/cml"
-            title="Star us on GitHub!"
+    <>
+      <header className={styles.wrapper} id="header" data-collapsed={collapsed}>
+        <div
+          className={cn(
+            styles.placeholder,
+            collapsed && styles.collapsed,
+            LayoutAlert && styles.withAlert
+          )}
+        />
+        <div className={styles.header}>
+          {LayoutAlert && <LayoutAlert collapsed={collapsed} />}
+          <LayoutWidthContainer
+            className={cn(styles.container, collapsed && styles.collapsed)}
+            wide={includes(modifiers, LayoutModifiers.Wide)}
           >
-            <GitHubIcon width="1em" height="1em" viewBox="5 5 30 30" />
-          </Link>
+            <Link
+              href="/"
+              className={styles.logoLink}
+              title="DVC"
+              aria-label="DVC"
+            >
+              <LogoSVG className={styles.logo} />
+            </Link>
+            <Nav />
+          </LayoutWidthContainer>
         </div>
-        <LayoutWidthContainer
-          className={cn(styles.container, collapsed && styles.collapsed)}
-          wide={includes(modifiers, LayoutModifiers.Wide)}
-        >
-          <Link
-            href="/"
-            className={styles.logoLink}
-            title="DVC"
-            aria-label="DVC"
-          >
-            <LogoSVG className={styles.logo} />
-          </Link>
-          <Nav />
-        </LayoutWidthContainer>
-      </div>
-    </header>
+      </header>
+      <HamburgerMenu
+        opened={opened}
+        collapsed={collapsed}
+        handleToggle={handleToggle}
+        handleKeyDown={handleKeyDown}
+        handleItemClick={handleItemClick}
+      />
+      <HamburgerButton
+        opened={opened}
+        collapsed={collapsed}
+        handleClick={handleToggle}
+        handleKeyDown={handleKeyDown}
+      />
+    </>
   )
 }
 
diff --git a/src/components/LayoutHeader/styles.module.css b/src/components/LayoutHeader/styles.module.css
index 4803d582b2..9456bb5e3d 100644
--- a/src/components/LayoutHeader/styles.module.css
+++ b/src/components/LayoutHeader/styles.module.css
@@ -1,12 +1,23 @@
 .placeholder {
+  transition: height 0.2s linear;
   height: var(--layout-header-height);
 
-  &.collapsed {
-    height: var(--layout-header-height-collapsed);
+  &.withAlert {
+    height: calc(var(--layout-header-height) + var(--layout-alert-height));
   }
 
   @media (--xs-scr) {
     height: var(--layout-header-height-collapsed);
+
+    &.withAlert {
+      height: calc(
+        var(--layout-header-height-collapsed) + var(--layout-alert-height)
+      );
+    }
+  }
+
+  &.collapsed {
+    height: var(--layout-header-height-collapsed);
   }
 }
 
@@ -61,8 +72,8 @@
 }
 
 .alert {
-  height: 35px;
-  line-height: 35px;
+  height: var(--layout-alert-height);
+  line-height: var(--layout-alert-height);
   font-size: 18px;
   text-align: center;
   width: 100%;
diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx
index 41ab52505e..8fa76ef0f8 100644
--- a/src/components/MainLayout/index.tsx
+++ b/src/components/MainLayout/index.tsx
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react'
 
 import { IPageProps } from '../Page'
 import LayoutHeader from '../LayoutHeader'
-import HamburgerMenu from '../HamburgerMenu'
 import LayoutFooter from '../LayoutFooter'
 import { handleFirstTab } from '../../utils/front/accessibility'
 
@@ -52,7 +51,6 @@ const MainLayout: LayoutComponent = ({
   return (
     <>
       <LayoutHeader modifiers={modifiers} />
-      <HamburgerMenu />
       <div id="layoutContent" className={styles.pageContent}>
         {children}
       </div>
diff --git a/src/components/Page/base.css b/src/components/Page/base.css
index b76e5b878a..da3a28cbf6 100644
--- a/src/components/Page/base.css
+++ b/src/components/Page/base.css
@@ -23,6 +23,7 @@
   --layout-width-wide: 1200px;
   --layout-header-height: 98px;
   --layout-header-height-collapsed: 78px;
+  --layout-alert-height: 35px;
 }
 
 html {