I need to use a fixed toolbar (with an extension). Problem is that The toolbar overlays the content as soon as the fixed prop gets added. How to place the content below the toolbar? CodePen example: ?&editors=101

<div id="app">
  <v-app id="inspire">
    <v-toolbar
      color="primary"
      dark
      fixed
      extended         
    >
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title slot="extension">Title</v-toolbar-title>
      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>
    </v-toolbar>

    <v-layout>
    <v-flex xs1 >
      +++ FIRST LINE +++ 
      [lots of text...]
      </v-flex>
        </v-layout>
  </v-app>
</div>

I need to use a fixed toolbar (with an extension). Problem is that The toolbar overlays the content as soon as the fixed prop gets added. How to place the content below the toolbar? CodePen example: https://codepen.io/anon/pen/jpgjyd?&editors=101

<div id="app">
  <v-app id="inspire">
    <v-toolbar
      color="primary"
      dark
      fixed
      extended         
    >
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title slot="extension">Title</v-toolbar-title>
      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>
    </v-toolbar>

    <v-layout>
    <v-flex xs1 >
      +++ FIRST LINE +++ 
      [lots of text...]
      </v-flex>
        </v-layout>
  </v-app>
</div>

• javascript
• vue.js
• toolbar
• vuetify.js

• Your only requirement is that the toolbar is always stuck to the top of the viewport? – sjahan Commented Aug 20, 2018 at 9:40

3 Answers 3

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