Opacity of Drop Down / Sub Navigation Menu Ride Theme

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 Partner
3477 463 527

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
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 Partner
3477 463 527

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
KMExplorer
Tourist
4 0 1

Hi there,

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