VuetifyJS toolbar overlays content as soon as fixed prop gets added VuetifyJS toolbar overlays content as soon as fixed prop gets added vue.js vue.js

VuetifyJS toolbar overlays content as soon as fixed prop gets added


One solution is adding app to v-toolbar and wrap v-layout inside v-content

<v-toolbar      app      color="primary"      dark      fixed      extended             >...</v-toolbar><v-content>  <v-layout>  </v-layout></v-content>

Demo https://codepen.io/ittus/pen/mGdbeN?editors=1010

References: Vuetify application layout tutorial


Add app to v-toolbar and wrap v-layout inside v-content


Couldn't get exactly your question, is this what you wanted to achieve:

new Vue({  el: '#app',  mounted(){    var fixedElement = document.getElementsByClassName('v-toolbar--fixed')[0];    var layout = document.getElementsByClassName('layout')[0];    layout.style = "padding-top: "+ fixedElement.offsetHeight + 'px';   }});

https://codepen.io/Younes_k/pen/LJEjOL