Vuetify CSS layout issue

Question

I currently follow the vuetify SPA example, wo the v-parallax whic is not yet fully ready for vue-cli v3. The current structure display the v-toolbar at the top , with the v-navigation-drawerr, then the v-content displaying the different views...

App.vue

    <template>
      <v-app light>
        <div id="app">
          <v-navigation-drawer absolute class="hidden-sm-and-up" v-model="sideNav">
            <v-toolbar flat>
              ....
            </v-toolbar>
            <v-list>
             ....
            </v-list>
          </v-navigation-drawer>
          <v-toolbar>
           ....
          </v-toolbar>
          <v-content>
            <router-view/>
          </v-content>
        </div>
      </v-app>
    </template>

Section1.vue

      <div class="section1">
        <section>
          <div class="parallax">
            <v-layout
              column
              align-center
              justify-center
              class="white--text"
            >
              <img src="../assets/images/vuetify.png" alt="Vuetify.js" height="200">
            </v-layout>
          </div>
        </section>
      </div>
    </template>


    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped lang="scss">
    .parallax {
      background-image: url('../assets/images/hero.jpeg');
      background-size:cover;
      /* Set a specific height */
      min-height: 600px;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    </style>

I would like to display the v-toolbar OVER the parallax background-image, which means it should be transparent and the background-image should display at the top, below the v-toolbar

is it currently posssible w CSS or should I not use vuetify and go back to a simple html/css template coding ?

thanks for feedback and advices

score 3 · Accepted Answer · edited Apr 08 '19 at 09:07

3

Why do you have a second toolbar in the navigation drawer? I would remove that.

Making the toolbar transparent is really simple:

<v-toolbar flat color="transparent">

To move the background to the top just remove the padding from all parent divs. You can do it for example like this class="pa-0" or class="ma-0 pa-0" to remove both margin and padding. Most likely you will do it in your App.vue:

<template>
  <v-app>

    <Toolbar/>

    <Home class="pa-0"/>

    <MyFooter/>

  </v-app>
</template>

edited Apr 08 '19 at 09:07

sunwarr10r

4,420
8
54
109

answered Apr 30 '18 at 09:36

Julian Fisch

93
1
8

It's not a second toolbar it's the hidden left drawer which is displayed when resizing down the layout. Thanks fo the tip.. I switched to a fixed toolbar with the padding in all content views and background... – May 01 '18 at 16:18

Vuetify CSS layout issue

1 Answers1