v-menu how to make it not go over a navbar in vue.js

Question

On the main page of vuetify we can see examples for the v-menu component, at this link

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

If you click on any of the buttons to open the v-menu and then scroll up the page

You will see that the menu goes over the navigation bar at the top, not sure why this is built in to vuetify, but does anyone know how to fix this?

Thank you

i guess it's intended to be like that. If you really want to change the position then go for position: relative and do a top: 50px or something on that thing — Deniz
– Deniz, Commented May 27, 2021 at 16:54

scar-2018 · Accepted Answer · 2021-05-27 17:19:28Z

2

Vuetify is beautiful material design and developers sometimes find it hard to customize CSS. However, Vuetify provides full access to customization using props, slot, etc.

The problem addressed can also be resolved by adding one prop.

<v-menu
  offset-y
>

Here offset-y offsets the menu from the bottom of the button

Vuetify tutorial

answered May 27, 2021 at 17:19

scar-2018

5282 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Igor Moraru · Accepted Answer · 2021-05-27 17:38:07Z

2

If you dig a bit into devTools, you can see that the z-index for v-navbar is 5, while the z-index for v-menu is 8. This is why the menu goes on top of navbar.

Obviously, you have two solutions: decrease the v-menu's z-index, or increase v-navbar's one. Decide, accordingly to your layout and needs.

answered May 27, 2021 at 17:38

Igor Moraru

7,7591 gold badge15 silver badges28 bronze badges

Collectives™ on Stack Overflow

v-menu how to make it not go over a navbar in vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related