greyed out effect on hover

goldilocks
(@goldilocks)

10 years, 1 month ago

I’ve used the ‘shadow’ effect under the general theme settings to create a greyed out effect on the site in the background by setting horizontal and vertical values etc to 4000px.

It works just as I want it, apart from I cannot figure out how to get the whole of the top level menu to have a white background when hovering on any of the menu items. Currently each li item has a white background (so I’ve removed the margins between the items to achieve a solid white background), but I’d like the whole width (100%) of the menu to have that solid white background.

The site is http://sogosolar.co.uk

https://ww.wp.xz.cn/plugins/megamenu/

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author megamenu
(@megamenu)

10 years, 1 month ago

Hi Goldilocks,

Nice effect, I haven’t seen that before.

I’ve taken a fairly long look and I can’t work out how to make it do what you want it to do. I suspect it’s z-index related.

The sub menu always needs to be above the menu bar (as the sub menu has the shadow on it), but the main menu bar needs to be above the sub menu for the shadow to display below it. I think it’s impossible using the current technique.

Regards,
Tom

Thread Starter goldilocks
(@goldilocks)

10 years, 1 month ago

Hi Tom,

Thanks for getting back to me. I was worried you might say it’s z-index related and therefore not possible!

I started out by researching methods for applying the greyed out effect via an additional div on hover before realising the shadow might just do it for me… I will go back to my research!

Many thanks
Becca
Thread Starter goldilocks
(@goldilocks)

10 years, 1 month ago
Quick update, I’m using this as the starting point.

But actually, I’m struggling with basic css now!

I’ve added an additional div, ‘wrapper’ in my header:
```
<div id="wrapper">
							<?php
								if ( has_nav_menu( 'primary' ) ) {
									wp_nav_menu( array( 'theme_location' => 'primary' ) );
								}
								else {
									wp_page_menu();
								}
							?></div>
```
Then changed the styles from the fiddle to:
```
.wrapper {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}

.wrapper {
    -webkit-transition:all 300ms;
    -moz-transition:all 300ms;
    -ms-transition:all 300ms;
    -o-transition:all 300ms;
    transition:all 300ms;
}

.wrapper:hover {
    background:rgba(0,0,0,.3);
}

.wrapper:hover .mega-menu-link {
    background:#ddd;
}

.mega-menu-wrap {
    padding:6px;
}

.mega-menu-link {
    margin-bottom:6px;
    padding:12px;
    border-radius:3px;
    background:#eee;
}

.mega-menu-link:hover {
    background:#fff!important;
}
```
But what I can’t figure out is which div in the mega menu is equivalent to the ‘expose’ div in the fiddle. I know this is really basic but I’m stumped!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘greyed out effect on hover’ is closed to new replies.

Tags