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

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

• javascript
• vue.js
• vuejs2
• vuetify.js

• 1 could you provide a screenshot of what you're getting? – Boussadjra Brahim Commented Nov 9, 2018 at 0:13
• 1 fixed it with this codepen.io/anon/pen/boxqwY – omega Commented Nov 9, 2018 at 0:14
• The codepen code is not loading properly. It must be a mistake with the code @omega – largoWinch Commented Jun 2, 2022 at 17:42

4 Answers 4

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

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>

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.

Use app-bar outside from router-view Use this example https://vuetifyjs.com/en/components/application/#application

<!-- App.vue -->

<v-app>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>

  <v-app-bar app>
    <!-- -->
  </v-app-bar>

  <!-- Sizes your content based upon application components -->
  <v-content>

    <!-- Provides the application the proper gutter -->
    <v-container fluid>

      <!-- If using vue-router -->
      <router-view></router-view>
    </v-container>
  </v-content>

  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>