diff --git a/src/components/app/MainNav.vue b/src/components/app/MainNav.vue
index f7c4fd2..8cec28d 100644
--- a/src/components/app/MainNav.vue
+++ b/src/components/app/MainNav.vue
@@ -265,7 +265,7 @@ export default {
   position: relative;
 }
 .mobile {
-  background: #005a9e;
+  background: rgba(0, 0, 0, 0.4);
   padding-left: 10px;
   width: initial;
   .item {
@@ -275,6 +275,9 @@ export default {
     margin-right: 5px;
     font-size: 25px;
   }
+  .tool-tip { 
+    top: -29px;
+  }
 }
 .container {
   display: flex;
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index f165d36..3aa5a59 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navigation" ref="navigation">
+  <div class="navigation" :class="{ mobile: mobileSize }" ref="navigation">
     <div
       class="tool-tip"
       ref="toolTip"
@@ -132,7 +132,11 @@ export default {
       if (this.drag) return;
       this.toolTipLocalName = null;
       this.toolTipServerID = serverID;
-      this.toolTipTopPosition = top - this.getTopHeight() + 20;
+      if (this.mobileSize) {
+        this.toolTipTopPosition = top - this.getTopHeight() + 80;
+      } else {
+        this.toolTipTopPosition = top - this.getTopHeight() + 20;
+      }
       this.toolTipShown = true;
     },
     mouseLeaveEvent() {
@@ -163,6 +167,14 @@ export default {
     }
   },
   computed: {
+    mobileSize() {
+      return (
+        this.$mq === "mobile" &&
+        (this.currentTab === 0 ||
+          this.currentTab === 1 ||
+          this.currentTab === 2)
+      );
+    },
     user() {
       return this.$store.getters.user;
     },
@@ -195,7 +207,6 @@ export default {
     selectedServerID() {
       return this.$store.getters["servers/selectedServerID"];
     }
-
   },
   mounted() {
     bus.$on("server-tool-tip", this.serverToolTipEvent);
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index a007fba..5f70a5f 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -6,7 +6,6 @@
         v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
         v-click-outside="hideLeftPanel"
       >
-        <MainNav v-if="$mq === 'mobile'" />
         <div class="inner">
           <navigation />
           <div class="content">
@@ -62,6 +61,7 @@
             </div>
           </div>
         </div>
+        <MainNav v-if="$mq === 'mobile'" />
       </div>
     </transition>
 
diff --git a/src/components/app/Tabs/ServerAndDMTab.vue b/src/components/app/Tabs/ServerAndDMTab.vue
index 1a546d3..eb3caeb 100644
--- a/src/components/app/Tabs/ServerAndDMTab.vue
+++ b/src/components/app/Tabs/ServerAndDMTab.vue
@@ -9,7 +9,7 @@
         v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
         v-click-outside="hideLeftPanel"
       >
-        <MainNav v-if="$mq === 'mobile'" />
+
         <div class="inner">
           <navigation />
           <div class="wrapper">
@@ -20,6 +20,7 @@
             </transition>
           </div>
         </div>
+        <MainNav v-if="$mq === 'mobile'" />
       </div>
     </transition>
     <message-panel :type="currentTab === 1 ? 0 : currentTab === 2 ? 1 : null" />
@@ -119,7 +120,6 @@ export default {
   display: flex;
   flex-direction: column;
   z-index: 1;
-  overflow: hidden;
 }
 .inner {
   z-index: 2;