Main Menu Drop Down Opacity

Hi Thanks,

I can see I am going to have to change some elements:

The background color is perfect now as you can see

1. I need to hide the hover background white color
2. I need to change the link text color to white
3. I need to change the link text hover color to perhaps off white just a bit to notice change.

That’s nice, looks great. Thank you! I tweaked it a little.

But for some reason, I have two of those here? I can’t remember why I put them here.

Does the top entry override and the bottom one become redundant?

Or are they combining effects and can I just combine them into one entry?

https://www.dropbox.com/s/lnhusywcts5khqk/Screen%20Shot%202018-06-27%20at%204.17.21%20PM.png?dl=0

• This reply was modified 6 years, 4 months ago by Jasmer. Reason: update

I changed the second one from #bbbbbb to #fa0000 and there is no change on the drop-down menus on hover.

Is there some conflicting quick CSS?

Perhaps this? This was to fix when I am hovering on non-transparent headers.

.header_color .main_menu ul:first-child > li a:hover, #top #wrap_all .av-main-nav ul > li:hover > a .avia-menu-text{
  color: #D3D3D3!important;
} /* fix menu hover color on non-transparent headers*/

Thank you,

Jas

Hi,

If I remove ithe CSS how would it work? The purpose of adding CSS is to make something work. If I remove it then what would work?

I’m not sure I understand your question. I added CSS for an effect, if I remove the CSS there will be nothing to make the effect.

Please review from the first post.

Thank you,

Jas

I just added css/js compression features. They were not disabled by default, I’m guessing because my site was developed before these options were available?

Before we make any changes are you telling me this is redundant CSS I have manually added to quick CSS perhaps? I may have done this some time ago and don’t remember. I’d like to understand what is going on before we change anything? Should I just remove the below CSS and leave the Advanced Styling?

#top #wrap_all .av-main-nav ul > li:hover > a, #top #wrap_all .avia_mega_div, #top #wrap_all .avia_mega_div ul, #top #wrap_all .av-main-nav ul ul {
    color: #bbbbbb;
    background-color: #ffffff;
}

Hi Ismael,

The CSS you included is not manually added to Quick CSS, So, it is coming from something else. There does not seem to be conflicting CSS that was added by me.

I changed the sublevel link color on hover to #db18db and there is no change.

PS, originally the css.js compression was OFF. I turned it on only after you mentioned it. So I’m not sure why you couldn’t see what you needed to originally.

Please check it out. Thanks for your help!

Jas

It works now. Please try the credentials again.

Important – Everything on the site looks as it should. I am just wondering why the Advanced Styling for the submenu ON HOVER does not change when I change the color.

Thanks,

Jas

This fixed that problem, but I think this may have had an unintended effect. Here is what is supposed to happen:

1. This site has a transparent header until your scroll. Then the header changes to white.

2. On the transparent header, the menu links are white

3. When you scroll and the transparent header changes to white, the menu links change to dark grey so they can be seen

4. However, when the header is in the white stage and you hover on the menu link, the menu link changes to white (this makes it disappear). When the header is white and I hover on a menu link it should change to dark grey. (see screenshot below)

Number 4 is the only thing I want to change. 1, 2 and 3 should not change.

Thank you,

Jas

Please test hovering on links in both