0

I'm trying to use the v-menu for mobile. However the items (icons, text, avatar) are not centered, even with the use of auto. I've tried multiple custom css solutions but nothing works.

The v-menu

enter image description here

v-menu code:

<v-menu offset-y auto>
    <v-btn slot="activator" icon
                >
                    <v-icon>fas fa-bars</v-icon>
                </v-btn>
                <v-list>
                    <!-- Home -->
                    <v-list-tile>
                        <v-list-tile-title>
                            <router-link to="/home" class="nav-text">
                                <a> Home </a>
                            </router-link>
                        </v-list-tile-title>
                    </v-list-tile>

                    <!-- About us -->
                    <v-list-tile>
                        <v-list-tile-title>
                            <router-link to="/aboutus" class="nav-text">
                                <a> about us </a>
                            </router-link>
                        </v-list-tile-title>
                    </v-list-tile>

                    <!-- Messages -->
                    <v-list-tile>
                        <v-list-tile-title>
                            <div class="alignMessageIcon">
                                <router-link to="/messages" class="nav-text">
                                    <v-icon size="22" color="grey darken-2">far fa-comment-alt</v-icon>
                                </router-link>
                            </div>
                        </v-list-tile-title>
                    </v-list-tile>

                    <!-- Profile -->
                    <v-list-tile>
                        <v-list-tile-title>
                            <router-link to="/profile" class="nav-text">
                                <v-avatar size="27">
                                    <img
                                            :src="currentUser.profile_img"
                                            :alt='currentUser.firstname'
                                    >
                                </v-avatar>
                            </router-link>
                        </v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-menu>
Otto
  • 663
  • 3
  • 17
  • 33
  • You want to center items in a `v-list` and not the `v-menu` because menu contains a list actually - different components. Have you tried e.g. `text-align: center;` on tile or title? I don't think there are properties for that except maybe `class`, so I presume you need custom css for this. – Traxo Aug 16 '18 at 10:03
  • I noticed that if I use the element editor, I see that by changing `v-list__tile__title` to `text-align: center;` it aligns the text. However from my css I'm not able to access this. Any ideas? – Otto Aug 16 '18 at 10:10
  • If you are using scoped CSS, follow steps here: https://stackoverflow.com/a/50985784/1981247 Other than that, I'd need more info to know. – Traxo Aug 16 '18 at 10:12
  • @Traxo ok I don't usually use scoped CSS but for the sake of my sanity I'll use it for the menu. – Otto Aug 16 '18 at 10:16

0 Answers0