How to set Vuetify Navigation Drawer always on top of all other app components

Question

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

With some components it appears to be on top, but then other components, such like a Leaflet (Map) component, 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 components?

Answer 1

1. open up your root component 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;
}