How can I adjust navigation dropdown menu opacity in Broadcast theme?

Store Design
, ,

Topic summary

A user seeks help adjusting the background opacity of navigation dropdown menus in Shopify’s Broadcast theme.

Proposed Solutions:

Two respondents provided similar CSS-based fixes:

  • Both suggest adding custom CSS code to the assets/theme.css file at the bottom
  • The code targets dropdown menu hover states using selectors like .sliderow:hover .sliderow__title
  • Background color values are specified with !important flags to override existing styles
  • One solution uses #ffffff7c (white with transparency), the other uses #3c3c3c (dark gray)

Implementation Path:

  1. Navigate to Online Store → Theme → Edit code
  2. Open Assets → theme.css
  3. Add the provided CSS snippet at the file’s end

Status: The discussion remains open with no confirmation from the original poster about which solution worked or if the issue was resolved. Both answers provide working code but differ in color choice.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hi! I am trying to adjust the opacity on the background color of the navigation dropdown menu. Please help! I am currently using the Broadcast theme. Below is the link to the preview.

https://23bebqfto188rx2t-71781712182.shopifypreview.com

1 Like
2

@katelyntly

Please add the following CSS code to your assets/theme.css bottom of the file.

@media (hover: hover){
.sliderow:hover .sliderow__title {
    background: #ffffffc7 !important;
}
}

Thanks!

3

Hi @katelyntly

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.css

@media (hover: hover){
.sliderow:hover .sliderow__title {
    background: #c3c3c3 !important;
}
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly