CODEWITHSUNDEEP
cssvue.jscss-selectorsvuetify.jsvue-router
Pramod
Pramod

Reputation: 351

v-list-item-title text color not changing when active in v-navigation-drawer

I am trying to make an application using the Vuetify framework. I am stuck in modifying the CSS properties of v-list-item.

The problem is that when an item is active everything is working as expected only the v-list-item-title text is not displayed. However, if I change the opacity to 1 like below:

.theme--dark.v-list-item--active:hover::before,
.theme--dark.v-list-item--active::before {
  opacity: 1;
  border-left: 3px solid #00ffff;
}

then the text is displayed but the background color and left border are lost. So, how can I solve this issue to get the desired result?

I reproduced the issue here: https://codepen.io/domarpdev/pen/ZELyEzP

Any help is highly appreciated. Thank You.

Upvotes: 0

Views: 1592

Answers (1)

Milan
Milan

Reputation: 78

You can put z-index with -1 on your .v-list-item--link:before class. That worked for me.

Upvotes: 1

Related Questions