Opacity of Drop Down / Sub Navigation Menu Ride Theme

Store Design
, ,

Topic summary

Issue: In the Shopify Ride theme, the drop-down/mega menu remains semi-transparent despite changing background and text colors in component-mega-menu.css. The user estimates opacity around 0.5 and provided CSS and an image showing the current appearance.

Context: “Mega menu” refers to the expanded navigation panel; “opacity” is the CSS property controlling element transparency; “!important” forces a CSS rule to override others.

Actions/Updates:

  • Shared CSS snippet for .mega-menu and .mega-menu__content, plus a screenshot.
  • Provided the store link for review.
  • Suggestion given to set .mega-menu__content { opacity: 1 !important; } to overcome potential overrides.
  • User implemented the suggestion, but the menu remains transparent.

Current status: No resolution. Transparency persists even with opacity: 1 !important, indicating other theme styles or color settings may be influencing appearance.

What’s next: Further investigation of theme CSS layers or settings is needed to identify the source of transparency. The attached image is central to understanding the issue. Discussion remains open.

Summarized with AI on January 13. AI used: gpt-5.
1

Hi there,

I have a problem changing the opacity of the drop down navigation / mega menu / sub navigation in the Ride theme. I have managed to change the background colour and text colour of the navigation using the component-mega-menu.css file but somehow the opacity seems to be at around 0.5.

I have put the code below as well as an image of what the navigation looks like currently.

Any help would be appreciated.

.mega-menu {
  position: static;
}

.mega-menu__content {
  background-color: #4A7F35BF;
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  left: 0;
  overflow-y: auto;
  padding-bottom: 2.4rem;
  padding-top: 2.4rem;
  position: absolute;
  right: 0;
  top: 100%;
}

.shopify-section-header-sticky .mega-menu__content {
  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
}

.header-wrapper--border-bottom .mega-menu__content {
  border-top: 0;
}

.js .mega-menu__content {
  opacity: 1;
  transform: translateY(-1.5rem);
}

.mega-menu[open] .mega-menu__content {
  opacity: 1;
  transform: translateY(0);

}

.mega-menu__list {
  display: grid;
  gap: 2.4rem 4rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
}

.mega-menu__link {
  color: #FFF;
  display: block;
  font-size: 1.3rem;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
  padding-bottom: 0.6rem;
  padding-top: 0.6rem;
  text-decoration: none;
  transition: text-decoration var(--duration-short) ease;
  word-wrap: break-word;
}

.mega-menu__link--level-2 {
  font-size: 1.4rem;
}

.mega-menu__link--level-2:not(:only-child) {
  margin-bottom: 0.8rem;
}

.header--top-center .mega-menu__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
}

.header--top-center .mega-menu__list > li {
  width: 16%;
  padding-right: 2.4rem;
}

.mega-menu__link:hover,
.mega-menu__link--active {
  color: #FFF;
  text-decoration: underline;
}

.mega-menu__link--active:hover {
  text-decoration-thickness: 0.2rem;
}

.mega-menu .mega-menu__list--condensed {
  display: block;
}

.mega-menu__list--condensed .mega-menu__link {
  font-weight: normal;
}

navigation_opacity.jpg
navigation_opacity.jpg1702×828 89.9 KB

2

Hi @KMExplorer ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Hi there,

No problem, here is the store link: Explorer Essentials

Thank you for looking into this.

4

Hey @KMExplorer ,

The opacity property you’re referring to is likely being controlled by other styles or overridden elsewhere in your theme’s CSS.

You can use the “!important” declaration to force your opacity value to take precedence.

Hope it helps!!

For Example:

.mega-menu__content {
  opacity: 1 !important;
}
5

Hi there,

I have added this as suggested but still not luck. The navigation is still transparent.