I'm currently working on a website project in nuxt.js with Vuetify. The issue I am facing is adding a white line under the app bar to separate it from the links I plan to add as extensions. Despite trying v-divider, I couldn't get rid of the space between the divider and the bottom line of the app-bar or customize its thickness and color.
<v-app-bar
color="black"
app
>
<v-row>
<v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
<v-spacer />
<v-app-bar-title
class="text-no-wrap text-h3"
style="width: fit-content;">
Title
</v-app-bar-title>
<v-spacer />
<v-col
cols="12"
class="pb-0 pt-1">
<v-divider></v-divider>
</v-col>
</v-row>
</v-app-bar>
After that, I attempted using the bottom border of v-app-bar__content, but unfortunately, the border didn't appear. Here's the code snippet:
<template>
<v-app-bar
color="black"
app
>
<v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
<v-spacer />
<v-app-bar-title
class="text-no-wrap text-h3"
style="width: fit-content;">
Title
</v-app-bar-title>
<v-spacer />
</v-app-bar>
</template>
<style>
.v-toolbar__content{
border-bottom-width: 2px;
border-color: white;
}
</style>
Is there a way for me to successfully add a white line exactly at the bottom border of the app-bar__content?