CODEWITHSUNDEEP
cssvue.jsvuetify.js
benwasin97
benwasin97

Reputation: 263

vuetify v-menu how to make custom elevation?

I am using vuetify and v-menu like from the docs here

https://vuetifyjs.com/en/components/menus/

I am confused on how I can make the elevation only show up on the bottom left and right, If I apply a class "elevation-2" to my v-menu for example, the elevation shows up everywhere but I just want it on the left, right, and bottom.

Thank you

Upvotes: 0

Views: 969

Answers (1)

Mani Mirjavadi
Mani Mirjavadi

Reputation: 1073

I don't think adding elevation-2 to v-menu do you any good. I would rather to add a css class selector to the v-btn and use box shadow. I add a css class selector test-btn to my v-btn and then in the styles I add a box shadow like this:

.test-btn {
  -webkit-box-shadow: 1px 11px 20px -3px #000000;
  box-shadow: 1px 11px 20px -3px #000000;
}

If you are not familiar with box shadow in css, you can use generator websites like this.

Upvotes: 1

Related Questions