Opacity of Drop Down / Sub Navigation Menu Ride Theme

Store Design
, ,
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.