Vuetify v-bottom-navigation Pushed down

Question

this is my main view route page

<template>
  <div>
    <MobileMain v-if="$vuetify.breakpoint.xsOnly"/>
    <Navigation v-else/>
    <router-view></router-view>
  </div>
</template>

<script>
import Navigation from '../components/Utils/Navigation'
import MobileMain from '../components/Utils/MobileMain.vue'

export default {
  components: {
    Navigation,
    MobileMain
  }
}
</script>

This is inside my mobile view

<template>
  <div>
    <template>
      <div>
        <v-app-bar color="deep-purple accent-4" dense dark>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>

          <v-toolbar-title>Page title</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn href="/KPI" icon>
            <v-icon >mdi-heart</v-icon>
          </v-btn>

        </v-app-bar>
      </div>
    </template>
    <template>
      <div>
        <v-bottom-navigation
          absolute
          horizontal
          class="nav__menu"
        >
          <v-btn color="deep-purple accent-4" text>
            <span>Recents</span>

            <v-icon>mdi-history</v-icon>
          </v-btn>

          <v-btn color="deep-purple accent-4" text>
            <span>Favorites</span>

            <v-icon>mdi-heart</v-icon>
          </v-btn>

          <v-btn color="deep-purple accent-4" text>
            <span>Nearby</span>

            <v-icon>mdi-map-marker</v-icon>
          </v-btn>
        </v-bottom-navigation>
      </div>
    </template>
  </div>
</template>

I'm on a project that can be responsive between mobile and desktop. there's a problem when using a mobile screen and open a page that has a long way down, the bottom navbar gets pushed away so I need to scroll to the bottom to find it, how to make it stay at the bottom of the screen and not get pushed?

Answer 1

Change absolute to fixed.

When applying absolute to v-bottom-navigation its position adjusts with respect to its parent. Applying fixed causes the element to always stay in the same place when the page is scrolled.