diff --git a/Components/NavBar.js b/Components/NavBar.js
index 946b7f0..a736c37 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -7,7 +7,48 @@
         this.state = {
             isOpen: false
         }
+        this.isTouchDevice = false
 	}
+    
+    componentDidMount() {
+        let hasTouchScreen = false;
+        if ("maxTouchPoints" in navigator) {
+            hasTouchScreen = navigator.maxTouchPoints > 0;
+        } else if ("msMaxTouchPoints" in navigator) {
+            hasTouchScreen = navigator.msMaxTouchPoints > 0;
+        } else {
+            const mQ = window.matchMedia && matchMedia("(pointer:coarse)");
+            if (mQ && mQ.media === "(pointer:coarse)") {
+                hasTouchScreen = !!mQ.matches;
+            } else if ("orientation" in window) {
+                hasTouchScreen = true;
+            } else {
+                var UA = navigator.userAgent;
+                hasTouchScreen = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
+            }
+        }
+        if (hasTouchScreen) {
+            this.isTouchDevice = true
+        } else {
+            this.isTouchDevice = false
+        }
+    }
+
+    onEnter() {
+        if ( !this.isTouchDevice ) {
+            return this.toggleVertical(this, true)
+        }
+    }
+
+    onLeave() {
+        return this.toggleVertical(this, false)
+    }
+
+    onClick() {
+        if ( this.isTouchDevice ) {
+            return this.toggleVertical(this)
+        }
+    }
 
     toggleVertical(prevState, force=null) {
         this.setState(prevState => ({
@@ -18,18 +59,18 @@
 	render() {
 		return (
             <>
-                <div className={Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null)} onMouseLeave={() => {this.toggleVertical(this.state, false)}}>
+                <div className={Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null)} onMouseLeave={() => {this.onLeave()}}>
                     <div className={Styles.group}>
-                        <img className={Styles.headerIcon} src="/Icons/CMP.svg" onClick={() => {this.toggleVertical(this.state)}}/>
-                        <a href="/"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
-                        <a href="/gps"><img className={Styles.icon} src="/Icons/GS.svg"/></a>
-                        <a href="/rsm"><img className={Styles.icon} src="/Icons/RM.svg"/></a>
-                        <a href="/clicksforms"><img className={Styles.icon} src="/Icons/CF.svg"/></a>
-                        {/* <a href="/castaway"><img className={Styles.icon} src="/Icons/CA.svg"/></a> */}
+                        <img className={Styles.headerIcon} src="/Icons/CMP.svg" onMouseEnter={() => {this.onEnter()}} onClick={() => {this.onClick()}}/>
+                        <a href="/#"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
+                        <a href="/gps#"><img className={Styles.icon} src="/Icons/GS.svg"/></a>
+                        <a href="/rsm#"><img className={Styles.icon} src="/Icons/RM.svg"/></a>
+                        <a href="/clicksforms#"><img className={Styles.icon} src="/Icons/CF.svg"/></a>
+                        {/* <a href="/castaway#"><img className={Styles.icon} src="/Icons/CA.svg"/></a> */}
                         {/* <a href="https://clcks.dev"><img className={Styles.icon} src="/Icons/CL.svg"/></a> */}
                     </div>
                     <div className={Styles.group}>
-                        <a href="/"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
+                        <a href="/#"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
                     </div>
                 </div>
             </>