javascript - How to set Vuetify Navigation Drawer always on top of all other app components - Stack Overflow

I'd like to know how I could do this.

With some ponents it appears to be on top, but then other ponents, such like a Leaflet (Map) ponent, they overlaps my SideDrawer so I can't use it properly.

How could I set my navigation drawer to be always on top with a higher z-index than the other ponents?

I'd like to know how I could do this.

With some ponents it appears to be on top, but then other ponents, such like a Leaflet (Map) ponent, they overlaps my SideDrawer so I can't use it properly.

How could I set my navigation drawer to be always on top with a higher z-index than the other ponents?

• javascript
• vue.js
• leaflet
• vuetify.js

Share Improve this question Follow asked Feb 19, 2020 at 21:29 Gabriel S.Gabriel S. 19722 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

1. open up your root ponent App.vue
2. make sure your style tag doesn't have the scoped attribute so CSS can apply globally
3. add the following CSS

.v-navigation-drawer {
z-index: 999999 !important;
}

I had a very similar problem with the v-calendar ponent. The navigation drawer was working for any other page than the one with v-calendar.

It turns out I was not using the elements v-app, v-content and v-container in the correct way. Could you share your App.vue content so we can check that?

I believe you should look for that structure rather than working on css tricks (not that we can't, but when working with ponents, we were not supposed to change that deep)

For example, in my app it works now and the structure I have is the following:

<template>
  <v-app>
    <v-navigation-drawer ... />
    <v-content>
      <v-container>
        <router-view />
      </v-container>
    </v-content>
  </v-app>
</template>

And the view with the calendar is more or less like:

<template>
  <v-row>
    <v-col>
      <v-sheet>
        <v-calendar />
      </v-sheet>
    </v-col>
  </v-row>
</template>

I hope it helps!