Solved Templates

SheFund template menu style

Asked by Julien 4 years ago Last activity 4 years ago

Hi,

Is it possible to reproduce the main menu hover style of "SheFund" template for basic template created with Helix latest framework ?

Try it but without success.

Thanks

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
4 years ago

Hi Julien,

yes, it's just a CSS, not php code.
Example code , it should work

.sp-megamenu-parent .sp-menu-item a:before {
 content:"";
 width:0;
 height:2px;
 background-color:#3b4555;
 display:inline-block;
 position:absolute;
 bottom:32px;
 opacity:0;
 visibility:hidden;
 transition:all .3s ease
}
.sp-megamenu-parent .sp-menu-item a:hover:before {
 width:20px;
 opacity:1;
 visibility:visible}

.sp-megamenu-parent .sp-menu-item.current-item a:before {
 width:20px;
 opacity:1;
 visibility:visible
}
.sp-dropdown .sp-menu-item a:before {
 width:20px;
 bottom:5px;
 left:0}

2 more replies

Oldest first Newest first Most helpful
Julien Asked this
4 years ago

Yes many thanks, two small remarks :

  • for the last child of a dropdown menu item the border bottom seems to be 1px higher than the css code (3px I think instead of 2px)
  • is it possible to have the ease transition for the dropdown menu items ?

Best regards

Paul Frankowski Senior Staff
4 years ago

CSS code customization is on your hands only.

Probably yes, but forum is not for adding a new features to Helix framework.

You have to use that class for adding extra/custom animation effect

.sp-megamenu-parent .sp-has-child:hover>.sp-dropdown { }

Log in to reply.