PrimeVue Menubar

Question

I created a drop down menu with menubar. However I have custumization problems :

• The transparency is well done, but the size of the horizontal items is too hight (and so not vertically centered. The required height is thirty pixels all inclusive ; (just resolved with height: 30px; in passive mode (neither hover nor seleted). The selection "Button" item in the horizontal menu remains too hight

• The vertical menu items are too separated from each over and the width of the vertical menus too narow ;

• The movement in the verticals menu items not be materialized (with a blue color) as it is in the horizontal menu;

• Impossible to move to a submenu with a mouse. Only with keybord arrows. Why ?

I tried a long time the css with modification of the "theme.css" of the saga-blue theme, but nothing to do nothing works except the css lines included in my code :

Code:

.p-menubar {
     background: transparent;
     padding: 0;
     height: 30px;
}

What are the particular css elements and clauses to modify ?

Answer 1

Eventually, using Chrome's inspector, I ended up discovering the CSS classes involved. By groping on the values I got about what I wanted.

The impacted code:

In the vue.js file:

<div id="menuU" class="user-menu" v-show="isvisible()">
         <Menubar:model="items" class="p-menubar"></Menubar>
</div>

the v-show parameter is application specific and not given here.

In css:

.menu-utilisateur {
     background-color: lightgrey;
     height: 30px;
 }

.p-menubar {
     background-color: lightgrey;
     padding: 0px;
     height: 30px;
}

 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
     padding: 0.5rem 1rem !important;
 }

 .p-menubar .p-menuitem-link {
     padding: 0.5rem 0.5rem !important;
 }

Don't forget the !important. It overwrites the default values.