diff --git a/web/e.cash/components/navbar/index.js b/web/e.cash/components/navbar/index.js
--- a/web/e.cash/components/navbar/index.js
+++ b/web/e.cash/components/navbar/index.js
@@ -9,11 +9,17 @@
     const [mobileMenu, setMobileMenu] = useState(false);
     const [selectedDropDownMenu, setSelectedDropDownMenu] = useState(-1);
     const [windowWidth, setWindowWidth] = useState('');
+    const [windowHeight, setWindowHeight] = useState(0);
+    const [navBackground, setNavBackground] = useState(false);
 
     const handleResize = () => {
         setWindowWidth(window.innerWidth);
     };
 
+    const handleScroll = () => {
+        setWindowHeight(window.scrollY);
+    };
+
     const getPrice = () => {
         const api =
             'https://api.coingecko.com/api/v3/simple/price?ids=ecash&vs_currencies=usd';
@@ -28,18 +34,30 @@
     useEffect(() => {
         // set the window width so logic for mobile or desktop menus is applied correctly
         setWindowWidth(window.innerWidth);
-        // add event listeners for resize so we can update the screen width
+        // add event listener for resize so we can update the screen width
         window.addEventListener('resize', handleResize);
+        // add event listerner for scroll so we can change the nav background on scroll
+        window.addEventListener('scroll', handleScroll);
         // get XEC price
         getPrice();
-        // remove the event listener after mount to avoid memory leak
+        // remove the event listeners after mount to avoid memory leak
         return () => {
             window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleScroll);
         };
     }, []);
 
+    useEffect(() => {
+        // change the navBackground state based when windowHeight changes
+        if (windowHeight >= 100) {
+            setNavBackground(true);
+        } else {
+            setNavBackground(false);
+        }
+    }, [windowHeight]);
+
     return (
-        <NavbarOuter>
+        <NavbarOuter navBackground={navBackground}>
             {announcementbar && (
                 <Link
                     href={announcementbar.link}
@@ -50,7 +68,7 @@
                     {announcementbar.text}
                 </Link>
             )}
-            <NavbarCtn>
+            <NavbarCtn navBackground={navBackground}>
                 <div className="navbar">
                     <Link href="/" className="nav_logo">
                         <Image
diff --git a/web/e.cash/components/navbar/styles.js b/web/e.cash/components/navbar/styles.js
--- a/web/e.cash/components/navbar/styles.js
+++ b/web/e.cash/components/navbar/styles.js
@@ -21,6 +21,7 @@
         align-items: center;
         justify-content: center;
         transition: all 200ms ease-in-out;
+        margin-top: ${props => (props.navBackground ? '-34px' : '0')};
         &:hover {
             background-color: ${props => props.theme.colors.accent};
             color: ${props => props.theme.colors.contrast};
@@ -30,7 +31,10 @@
 
 export const NavbarCtn = styled.div`
     width: 100%;
-    background-color: rgba(0, 0, 0, 0);
+    background-color: ${props =>
+        props.navBackground
+            ? props.theme.colors.navbarBackground
+            : 'transparent'};
     position: relative;
     padding: 0 24px;
 
@@ -77,16 +81,17 @@
             font-weight: 500;
             letter-spacing: 1px;
             position: relative;
-            padding: 36px 20px;
             transition: all 200ms ease-in-out;
             cursor: pointer;
+            padding: ${props =>
+                props.navBackground ? '28px 20px' : '36px 20px'};
         }
     }
 
     .nav_dropdown_ctn {
         position: absolute;
         flex-direction: column;
-        top: 90px;
+        top: ${props => (props.navBackground ? '80px' : '90px')};
         left: 0;
         width: 300px;
         z-index: 99;
diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js
--- a/web/e.cash/styles/theme.js
+++ b/web/e.cash/styles/theme.js
@@ -9,6 +9,7 @@
         darkBlue: '#001137',
         videocover:
             'linear-gradient(9deg,#001137 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))',
+        navbarBackground: 'rgba(0, 0, 0, 0.65)',
     },
     roadmap: {
         sectionHeader: '#00abe7',
@@ -42,6 +43,7 @@
         darkBlue: '#181818',
         videocover:
             'linear-gradient(9deg,#181818 18%,transparent 91%),linear-gradient(180deg,rgba(0, 0, 0, 0.46),rgba(0, 0, 0, 0.46))',
+        navbarBackground: 'rgba(0, 0, 0, 0.65)',
     },
     roadmap: {
         sectionHeader: '#ffffff',