Menu hover?

[micheal_w]

Hi Guys,
how can I achieve this type of hover with Atelier like here: http://joyn.swiftideas.com/home/home-multi-layer-parallax/
(little rectangular block comes down above the menus)

Thanks!

[Kyle – SUPPORT]

Hi

Add this to your custom css:

nav .menu > li.current-menu-ancestor > a, nav .menu > li.current-menu-item > a, nav .menu > li.current-scroll-item > a, #mobile-menu .menu ul li.current-menu-item > a {
  box-shadow: 0 5px 0 #52cebe inset;
}

– Kyle

[micheal_w]

Hi Kyle,

thanks for the code however it works differently unfortunately. At the moment the top rectangular block appears when the menu is active but not on hover. Can it be active only when I hover over the menu?

[Kyle – SUPPORT]

Try this instead:

#main-navigation ul.menu > li:hover > a {
  box-shadow: 0 5px 0 rgba(82, 206, 190, 0.7) inset;
}

– Kyle

[micheal_w]

Almost perfect, thanks!
The only difference is, that now on my site the hover boxes appear straight away without any “effect” while on this site http://joyn.swiftideas.com/home/home-multi-layer-parallax/ they appear a bit slowly, going down from the top… Can it be like that please?

[Kyle – SUPPORT]

Try adding this:

.full-center #main-navigation ul.menu > li > a, .full-center .header-right ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center #logo h1, .full-center .header-right div.text {
  transition: height 0.3s ease-in-out 0s, line-height 0.3s ease-in-out 0s, box-shadow 0.3s ease-in-out 0s;
}

– Kyle

[micheal_w]

If I use this code, there is no rectangular hover boxes at all…

[Kyle – SUPPORT]

Did you keep the other css too?

– Kyle

[micheal_w]

No, I replaced it…

[Kyle – SUPPORT]

You need that too

– Kyle

[micheal_w]

YAY! it works, beautiful, thank you!

[Kyle – SUPPORT]

No problem 🙂