Hi Josue

Great suggestion, however, I need the videos to play natively in the slider on both desktop and mobile (no still images or fallback images).

I saw this from another post. Will that work with the latest version?

You can force videos to play on mobiles but this is not supported, open js/shortcodes.js and change line 683:

this.isMobile = $.avia_utilities.isMobile;

To:

this.isMobile = false;

• This reply was modified 9 years ago by codemode.

I found another post and this CSS seemed to do the trick.

#top ul.sub-menu a {
background-color: rgba(0, 0, 0, 0);
font-weight:normal;
}

.main_menu .menu ul {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

.av_header_transparency .main_menu .menu ul li a, .av_header_transparency .main_menu ul ul {
background-color: rgba(0,0,0,0)!important;
}

Thank you for your suggestions.

Hi Ismael

I tried and that didn’t work.

FYR I have the logo area default background set to #000000 (black). But I have that area set to a transparent background on individual pages. So when you scroll, the header background goes from transparent to black. I just can’t seem to get the sub menu to have a black background when scrolled. As you can see from my code above, I have the submenu background set to alpha 0 by default for the transparent bg. However, I’m not sure how to override that to turn black on scrolled. Perhaps there is a better way to achieve the same effect?

Thanks for your help!

Hi Rikard

I’m unable to do so cause I’m under an NDA with the client at this time.

I basically just need my main menu’s dropdown menu background to be black when the user has scrolled down the page about 5% (or when the sticky header becomes active). And then go back to transparent when scrolled all the way to the top.

I’m using white text for the menu. And this is the custom CSS I used to make the background transparent.

#top ul.sub-menu {
background-color: rgba(255, 225, 255, 0);
font-weight:normal;
}

#top ul.sub-menu a {
background-color: rgba(255, 225, 255, 0);
font-weight:normal;
}

.main_menu .menu ul {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

This looks great when the menu drops down over a full width image directly under the header, however, when you scroll down the page where the background is white and then hover over an item in the sticky header to reveal the dropdown menu, you can’t see the white text on the white background. So in that case, I need the dropdown menu background to be black. And then back to transparent when all the way back to the top of the page.

That make sense?

Will do. Thank you.

Using the rollover code from the link mentioned, how can I then create a link to an image/video (via the built-in lightbox), link to a page #target, or link to external site?

Thank you!