diff --git a/landing/global.css b/landing/global.css
--- a/landing/global.css
+++ b/landing/global.css
@@ -1,4 +1,7 @@
 :root {
+  --landing-page-z-index: 0;
+  --mobile-nav-z-index: 1;
+  --header-z-index: 2;
   --purple: #7e57c2;
   --white: #fff;
   --white1: #ebedee;
diff --git a/landing/header.css b/landing/header.css
--- a/landing/header.css
+++ b/landing/header.css
@@ -9,6 +9,15 @@
   justify-content: space-between;
   padding: 18px 32px;
   width: 1850px;
+  z-index: var(--header-z-index);
+  background-color: transparent;
+  transition: 650ms;
+  transition-property: background-color;
+}
+
+div.headerContainerMobileNavActive {
+  background-color: var(--comparison-cards);
+  transition: 250ms;
 }
 
 .logo {
diff --git a/landing/header.react.js b/landing/header.react.js
--- a/landing/header.react.js
+++ b/landing/header.react.js
@@ -7,20 +7,44 @@
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import type { SetState } from 'lib/types/hook-types.js';
+
 import css from './header.css';
 import typography from './typography.css';
 
-function Header(): React.Node {
+type Props = {
+  +showMobileNav: boolean,
+  +setShowMobileNav: SetState<boolean>,
+};
+
+function Header(props: Props): React.Node {
+  const { showMobileNav, setShowMobileNav } = props;
+
+  const headerContentContainerClassName = classNames({
+    [css.headerNavContentContainer]: true,
+    [css.headerContainerMobileNavActive]: showMobileNav,
+  });
+
   const logoTextClassName = classNames([typography.heading2, css.logoText]);
   const badgeClassName = classNames([typography.paragraph2, css.betaBadge]);
   const navLinkClassName = classNames([typography.subheading2, css.tab]);
 
+  const onClickLogo = React.useCallback(() => {
+    setShowMobileNav(false);
+  }, [setShowMobileNav]);
+
+  const onClickMobileNavIcon = React.useCallback(() => {
+    setShowMobileNav(!showMobileNav);
+  }, [setShowMobileNav, showMobileNav]);
+
   return (
     <nav className={css.headerContainer}>
-      <div className={css.headerNavContentContainer}>
+      <div className={headerContentContainerClassName}>
         <div className={css.logo}>
           <NavLink to="/">
-            <h1 className={logoTextClassName}>Comm</h1>
+            <h1 onClick={onClickLogo} className={logoTextClassName}>
+              Comm
+            </h1>
           </NavLink>
           <div className={badgeClassName}>Beta</div>
         </div>
@@ -74,7 +98,7 @@
               <FontAwesomeIcon icon={faGithub} className={css.icon} size="sm" />
             </div>
           </a>
-          <div className={css.menuIcon}>
+          <div className={css.menuIcon} onClick={onClickMobileNavIcon}>
             <FontAwesomeIcon icon={faBars} className={css.icon} size="sm" />
           </div>
         </div>
diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -7,7 +7,7 @@
   word-break: break-word;
   height: 100%;
   position: relative;
-  z-index: 0;
+  z-index: var(--landing-page-z-index);
 }
 
 .innerContainer {
diff --git a/landing/landing.react.js b/landing/landing.react.js
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -85,14 +85,19 @@
     }
   }, [onKeyservers, onPrivacy, onSupport, onTerms, onTeam, onInvestors, onQR]);
 
-  let header = <Header />;
-  if (onQR) {
-    header = null;
+  let header;
+  if (!onQR) {
+    header = (
+      <Header
+        showMobileNav={showMobileNav}
+        setShowMobileNav={setShowMobileNav}
+      />
+    );
   }
 
-  let footer = <Footer />;
-  if (onQR) {
-    footer = null;
+  let footer;
+  if (!onQR) {
+    footer = <Footer />;
   }
 
   return (
diff --git a/landing/mobile-nav.css b/landing/mobile-nav.css
--- a/landing/mobile-nav.css
+++ b/landing/mobile-nav.css
@@ -5,7 +5,7 @@
   left: 0;
   right: 0;
   height: 100vh;
-  z-index: 1;
+  z-index: var(--mobile-nav-z-index);
   background-color: var(--comparison-cards);
   padding: 8px 16px 0;
   transition: 500ms;