I found another problem on a website with a sticky header, where the header becomes slightly transparent when scrolling. Do the hover effects for the menu items only work when the menu is at the very top? If you scroll a little, they no longer work?!
My Code in Custom CSS
sp-header {
height: 100px !important;
display: flex;
align-items: center;
}
sp-logo {
margin: 0;
align-self: center;
}
.header-sticky,
.sp-sticky-header,
.sp-header.header-sticky {
background-color: rgba(168, 213, 186, 0.75) !important;
backdrop-filter: blur(6px);
transition: background-color 0.3s ease;
}
.header-sticky .sp-megamenu-parent > li > a,
.sp-sticky-header .sp-megamenu-parent > li > a {
color: #111 !important;
transition: color 0.3s ease;
}