My bottom nav is cutting the content in my body, I've tried to put if fixed but then it just goes right down to the bottom

This is how it looks right now:

This is my code, I can't add the code to this question because it won't show u, but this is my bottom nav code

This is how the code looks:

My bottom nav is cutting the content in my body, I've tried to put if fixed but then it just goes right down to the bottom

This is how it looks right now:

This is my code, I can't add the code to this question because it won't show u, but this is my bottom nav code

This is how the code looks:

• javascript
• web
• vue.js
• progressive-web-apps
• vuetify.js

• 2 I think you should add app property? <v-bottom-nav app> – Traxo Commented Dec 5, 2018 at 20:19

2 Answers 2

Wrap your content into <v-content></v-content> element and add app property to <v-bottom-nav> as mentioned by Traxo.
Working example: https://codepen.io/anon/pen/YRoexV

Since the release v2.3.0 https://github.com/vuetifyjs/vuetify/releases/tag/v2.3.0

v-content is now v-main, so the new way to structure this is something like this:

App.vue:

<template>
  <v-app>

    <AppBar/>

    <v-main>
      <router-view></router-view>
    </v-main>

    <BottomNavigation/>

  </v-app>
</template>

BottomNavigation.vue:

<template>
  <v-container>
  <v-bottom-navigation
    fixed
    app
  >
    <v-btn>
      <span>Recents</span>
      <v-icon>mdi-history</v-icon>
    </v-btn>

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

    <v-btn>
      <span>Nearby</span>
      <v-icon>mdi-map-marker</v-icon>
    </v-btn>
  </v-bottom-navigation>
  </v-container>
</template>