diff --git a/gatsby-config.js b/gatsby-config.js
index c45367c..746d28c 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -31,6 +31,13 @@ module.exports = {
         `gatsby-plugin-sharp`,
         `gatsby-transformer-sharp`,
         `gatsby-transformer-json`,
+        {
+            resolve: `gatsby-plugin-portal`,
+            options: {
+                key: "osnav",
+                id: "osnav",
+            },
+        },
         {
             resolve: `gatsby-plugin-remote-images`,
             options: {
diff --git a/package.json b/package.json
index 65ee006..bd19187 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
         "gatsby-plugin-manifest": "3.14.0",
         "gatsby-plugin-mdx": "2.14.0",
         "gatsby-plugin-offline": "4.14.0",
+        "gatsby-plugin-portal": "^1.0.7",
         "gatsby-plugin-react-helmet": "4.14.0",
         "gatsby-plugin-react-i18next": "1.1.1",
         "gatsby-plugin-remote-images": "3.1.1",
diff --git a/src/components/navigation.js b/src/components/navigation.js
index 1cb3846..a6a2a54 100644
--- a/src/components/navigation.js
+++ b/src/components/navigation.js
@@ -3,62 +3,10 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Trans, Link } from "gatsby-plugin-react-i18next";
 import { graphql, StaticQuery } from "gatsby";
-import { createPortal } from "react-dom";
 
 import * as styles from "./navigation.module.scss";
-import { X } from "lucide-react";
 import { Fade as Hamburger } from "hamburger-react";
-
-const OffScreenNav = ({ active, close }) => {
-    if (typeof document === "undefined") return <></>;
-
-    return createPortal(
-        <div
-            className={
-                styles.offscreenNav + (active ? " " + styles.active : "")
-            }
-        >
-            <div className={styles.inner}>
-                <button className={styles.close} onClick={close}>
-                    <X />
-                </button>
-                <span>
-                    <Trans>menu</Trans>
-                </span>
-                <Link to="/" activeClassName={styles.active}>
-                    <Trans>home</Trans>
-                </Link>
-                <Link
-                    id="navBtnProjects"
-                    to="/about"
-                    activeClassName={styles.active}
-                >
-                    <Trans>about</Trans>
-                </Link>
-                <Link
-                    id="navBtnProjects"
-                    to="/projects"
-                    activeClassName={styles.active}
-                >
-                    <Trans>projects</Trans>
-                </Link>
-                <Link
-                    id="navBtnSocial"
-                    to="/social"
-                    activeClassName={styles.active}
-                >
-                    <Trans>social</Trans>
-                </Link>
-            </div>
-        </div>,
-        document.body
-    );
-};
-
-OffScreenNav.propTypes = {
-    close: PropTypes.func.isRequired,
-    active: PropTypes.bool.isRequired,
-};
+import OffScreenNav from "./offscreenNav";
 
 const Navigation = ({ isHome }) => {
     let [atTop, setAtTop] = useState(false);
@@ -109,11 +57,11 @@ const Navigation = ({ isHome }) => {
                 (atTop ? " " + styles.homeBarTransparent : "")
             }
         >
+            <OffScreenNav
+                active={offscreenNavActive}
+                close={closeOffscreenNav}
+            />
             <nav className={styles.topBarInner}>
-                <OffScreenNav
-                    active={offscreenNavActive}
-                    close={closeOffscreenNav}
-                />
                 <StaticQuery
                     query={graphql`
                         query {
diff --git a/src/components/navigation.module.scss b/src/components/navigation.module.scss
index bf36288..de2aaec 100644
--- a/src/components/navigation.module.scss
+++ b/src/components/navigation.module.scss
@@ -16,6 +16,7 @@
     transition: opacity 0.25s, left 0.25s;
     pointer-events: none;
     overscroll-behavior: contain;
+    
 
     &.active {
         left: 0;
@@ -112,6 +113,7 @@
         .hamburger {
             display: none;
             height: 43px;
+            margin-top: -3px;
 
             @media (max-width: 500px) {
                 display: block;
diff --git a/src/components/offscreenNav.js b/src/components/offscreenNav.js
new file mode 100644
index 0000000..4e246df
--- /dev/null
+++ b/src/components/offscreenNav.js
@@ -0,0 +1,61 @@
+/* eslint-disable no-undef */
+import React from "react";
+import PropTypes from "prop-types";
+import { Trans, Link } from "gatsby-plugin-react-i18next";
+import { createPortal } from "react-dom";
+
+import * as styles from "./navigation.module.scss";
+import { X } from "lucide-react";
+
+const OffScreenNav = ({ active, close }) => {
+    if (typeof document === "undefined") return <></>;
+
+    return createPortal(
+        <div
+            className={
+                styles.offscreenNav + (active ? " " + styles.active : "")
+            }
+        >
+            <div className={styles.inner}>
+                <button className={styles.close} onClick={close}>
+                    <X />
+                </button>
+                <span>
+                    <Trans>menu</Trans>
+                </span>
+                <Link to="/" activeClassName={styles.active}>
+                    <Trans>home</Trans>
+                </Link>
+                <Link
+                    id="navBtnProjects"
+                    to="/about"
+                    activeClassName={styles.active}
+                >
+                    <Trans>about</Trans>
+                </Link>
+                <Link
+                    id="navBtnProjects"
+                    to="/projects"
+                    activeClassName={styles.active}
+                >
+                    <Trans>projects</Trans>
+                </Link>
+                <Link
+                    id="navBtnSocial"
+                    to="/social"
+                    activeClassName={styles.active}
+                >
+                    <Trans>social</Trans>
+                </Link>
+            </div>
+        </div>,
+        document.getElementById("osnav")
+    );
+};
+
+OffScreenNav.propTypes = {
+    close: PropTypes.func.isRequired,
+    active: PropTypes.bool.isRequired,
+};
+
+export default OffScreenNav;
diff --git a/yarn.lock b/yarn.lock
index 7d9121e..d268819 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1062,7 +1062,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -5852,6 +5852,13 @@ gatsby-plugin-page-creator@^3.14.0:
     globby "^11.0.4"
     lodash "^4.17.21"
 
+gatsby-plugin-portal@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-portal/-/gatsby-plugin-portal-1.0.7.tgz#c2ff2cb2bbec27e0ae9ab610857f603197189dc0"
+  integrity sha512-Drb2zj9qOVbt+/miINhyT7IvUaY+z/sxFT+0+p0yX4theKSVJgtu0YisA+DFlCmNl+KE6VjbqANZ0HUh6aWVMA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 gatsby-plugin-react-helmet@4.14.0:
   version "4.14.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-4.14.0.tgz#69fe0bd90d65356a0aa144d4e8d75d2559638514"