Seperate opacity for menu and sumenu

Shapely
1

Hi,

I have noticed that there is an opacity rather than a total colour change on the main menu.

I have inserted the code below in the appearence section for custom css. The problem is that the sub-menu background on hover is still transparent. The slider loading bar on wite can be seen going by and through the opened sub-menu.

.menu li a {
    color: #ffffff;
    opacity: 1;
}
.menu li a:hover {
    opacity: 0.5 !important;
}
.menu > li > ul > li > a:hover {
    color: #ffffff;
    background: #000000;
    opacity: 1 !important;
}
2

Website Page

3

Hi @shahidul,

Thank you for your another question.

I visited your shared site but don’t see the sub-menu background on hover transparent as shown in the attached screenshot.

Please advise.

Best Regards,
Movin

4

Hi Movin,

If you hover over the first sub-menu option and wait for the slider loading bar (top of the plugin) go by you will see it through the sub-menu.

regards,
Shahdiul

5

It is not the opacity issue or transparency issue but the z index issue which you can resolve by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

#page #masthead ul.dropdown-menu {
    z-index: 999999;
}
6

Hi Movin,

My bad. Thank you for that. Worked like a charm.

7

You are always welcome here :slight_smile: