Active menu item/hover menu effect like Joyn

[FlawlessWeb]

Your new theme Joyn looks great. One feature ‘missing’ from Cardinal that works great in Joyn is the active menu item/hover menu effect from header 1 – http://joyn.swiftideas.com/

Any chance of implementing that or something similar in Cardinal?

Thanks.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Unfortunately not, as we need differentiation within our themes or they would all be the same. However you can add this with CSS:

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

[FlawlessWeb]

No problem. Thanks for the css.

[Kyle – SUPPORT]

No problem

– Kyle

[FlawlessWeb]

Hi Kyle,

Thanks again for the code, just having one issue with my setup.

This is the code I am currently using, slightly altered to yours to place the box shadow underneath the active menu item:

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 3px 0 #1e73be;
}
.overlay-menu-open #main-navigation ul.menu > li:hover > a {
  box-shadow: none;
}
.overlay-menu-open 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: none;
}

That code introduces the page shadow menu effect on the main menu but also hides it from the overlay menu which I want. The issue I am facing is that I also want to hide the box shadow effect from the slideout mobile menu. See the screenshot for how it currently looks.

I have the tried the following code to hide it without any luck:

#mobile-menu  #main-navigation ul.menu > li:hover > a {
  box-shadow: none !important;
}

#mobile-menu nav .menu > li.current-menu-ancestor > a  {
  box-shadow: none !important;
}

Any idea on what code to use to achieve what I want?

Thanks.

Attachments:

You must be logged in to view attached files.

[FlawlessWeb]

Never-mind, I figured it out 🙂

.mobile-menu-open nav .menu > li.current-menu-ancestor > a {
box-shadow:none !important;
}

[Kyle – SUPPORT]

Ok great 🙂

– Kyle