How to have multiple fixed appbars/toolbar in Vuetify?-CodePudding

I am working on a nuxt project with vuetify. There is one main header for the entire app already.

<v-app-bar app fixed> Main Header </v-app-bar>

I need to show another fixed header below the main header for a custom component. The problem is it is either overlapping or getting scrolled away. I tried https://codesandbox.io/s/nuxt-vuetify-forked-zgk86y?file=/pages/index.vue, but I am not exactly sure how to achieve this.

CodePudding user response：

I think your codesanbox vuetify setting has some problems. But anyways, this is how it can be done (There are several ways and this is the simple one):

<v-app>
    <v-main>
      <v-app-bar color="warning" dark app fixed> Main Header </v-app-bar>
      <v-app-bar color="primary" dark fixed > component header </v-app-bar>

      <v-card >
        <v-card-text>
          <div v-for="n in 5" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo
            inventore consequatur, explicabo pariatur aspernatur deserunt beatae
            perferendis culpa deleniti necessitatibus amet odio sed, ea sint in!
          </div>
        </v-card-text>
      </v-card>
    </v-main>
  </v-app>

You can check the whole code in codepen.