How to set up toolbar to be fixed in vuetify?

Question

In vuetify I use a toolbar

    <v-toolbar dark color="primary">
        <v-toolbar-side-icon @click.stop="drawer.drawer = !drawer.drawer"></v-toolbar-side-icon>
        <v-toolbar-title>{{drawer.title}}</v-toolbar-title>
    </v-toolbar>
    <router-view v-bind:page="pageData"></router-view>

But I want to make it fixed, and not overlap with the vuerouter contents. How can I do that? I tried putting fixed but it still overlaps.

Thanks

Solution 1

Since version 2.0.0 v-toolbar isn't fixable use v-app-bar https://vuetifyjs.com/en/components/app-bars

Solution 2

1. Add the app attribute to the toolbar
2. Put your router outlet content inside a v-content element.
3. Finally, make sure the whole shebang is inside a v-app element.

Solution 3

Use css arguments in style tags. Cf.) https://journal.simondepelchin.be/2019/03/04/how-to-make-a-sticky-tabs-bar-with-vuetify/

<template>
  <v-toolbar class="fixed-bar">
    <!-- ... -->
  </v-toolbar>
</template>


<style scoped>
.fixed-bar {
  position: sticky;
  position: -webkit-sticky; /* for Safari */
  top: 6em;
  z-index: 2;
}
</style>

Comments

[Boussadjra Brahim]

could you provide a screenshot of what you're getting?

[omega]

fixed it with this codepen.io/anon/pen/boxqwY