Floating action button is hiding in bottom navigation bar

Question

<v-tooltip top>
  <template v-slot:activator="{ on }">
        <v-btn
          fab
          color="green"
          v-on="on"
          bottom
          right
          fixed
          :loading="isRefreshing"
          @click="refreshFiles"
        >
          <v-icon color="white">mdi-sync</v-icon>
        </v-btn>
      </template>
  <span>Refresh</span>
</v-tooltip>

<v-bottom-navigation v-if="isMobileViewVisible" app fixed grow shift>
  <template v-for="item in menuItems">
            <v-btn
              v-if="item.isVisible"
              :key="item.title"
              icon
              @click="goToRoute({ name: item.name, params: item.params })"
            >
              <span>{{ item.title }}</span>
              <v-icon>{{ item.icon }}</v-icon>
            </v-btn>

          </template>
  <v-btn icon @click="toProfileEdit">
    <span>Profile</span>
    <v-icon>mdi-account</v-icon>
  </v-btn>
</v-bottom-navigation>

I am using vuejs with vuetify, I have one query where I am stuck, The issue is I am using bottom navigation bar to route to various components(pages), and each page has a floating action button in right bottom, The issue the floating action button is getting hide inside the bottom navigation bar.

Is there any idea or way on how to overcome this issue ??

Any help with example would be appreciated ..

As you can see the green button is getting hide behind bottom nav bar.

Answer 1

Try out to use an inline style :

<v-btn style="z-index:100; bottom:72px;" fab ...