Opacity of Drop Down / Sub Navigation Menu Ride Theme

KMExplorer
Tourist
4 0 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

Replies 4 (4)

BSS-Commerce
Shopify Expert
3380 448 499

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

KMExplorer
Tourist
4 0 1

Hi there,

No problem, here is the store link: Explorer Essentials

Thank you for looking into this.

BSS-Commerce
Shopify Expert
3380 448 499

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;
}
 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

KMExplorer
Tourist
4 0 1

Hi there,

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