Help with transparent menu

Developer Support CMS Development
1

I need help with making the hover not transparent on the dropdown menu I created in the header hat menu in the top right. When someone scrolls over the glove icon, the options are shown, but the background is transparent and they can’t read the dropdown options. Can you please help with this too? https://www.encoder.com/

2

Hey Taylor here’s a code snippet that can help you

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
background-color: #ffffff;
}
3

Hi @TaylorLioy,

It looks like that dropdown is just inheriting the transparent background because there isn’t anything explicitly set for that. You may have to play around with this a bit, but try this in your CSS:

/*Background for the hat menu dropdown*/
.header__hat .menu-item-has-children .sub-menu {
 background-color: #fff !important;
 padding: 10px;
 border-radius: 4px; /* matches site standard */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* matches existing elements */
 z-index: 999;
}
/*Link style for the hat menu dropdown*/
.header__hat .sub-menu a {
 color: #000;
 padding: 8px 12px;
 display: block;
 text-decoration: none;
}
/*Hover state for the hat menu dropdown*/
.header__hat .sub-menu a:hover {
 background-color: #f0f0f0;
}

I hope this gets you going in the right direction!

Josh

4

You saved me and my sanity. THANK YOU!!!