Change background color of Menubar items when on hover

[martin97peru]

Hi, i can't change the menu items color when on hover

image: https://ibb.co/qdL2Q6c
As you can see, when on hover the color is shown only in the corners, but not on the actual item
This is my css code:

Code: Select all

/*Menubar*/
.p-menubar {
    background-color: var(--primary) !important;
}
.p-menu-list {
    background-color: var(--primary) !important;
}
.p-menuitem {
    background-color: var(--primary) !important;
}
.p-menu-list:hover {
    background-color: #000 !important;
}
.p-menuitem:hover {
    background-color: #000 !important;
}
.p-menuitem-text, .p-menuitem-icon, .p-submenu-icon {
    color: var(--text-primary) !important;
}

[mcandu]

Hi,

I don't get what you're trying to do. You mentioned hover but the image you upload pointing focus box-shadow. If you could please be more specific I'd be glad.

[peti9585]

Hi,

You can just do this in your components .css file:

Code: Select all

::ng-deep .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
    background-color: your color;
}