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
          
        >
          <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?

CodePudding user response：

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.