Item Border Hover Transtions

Hi Julius,

I’m sorry but the plugin doesn’t support that style of border at this time.

Regards,
Tom

I figured it out!. The trick is in the css content rule with event set to hover in the max mega menu settings. This is the custom styling for anyone else that may land here.

#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link::before {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	border-bottom: 2px solid;
	-webkit-transition: width .3s ease;
	-moz-transition: width .3s ease;
	-o-transition: width .3s ease;
	transition: width .3s ease;

}
#{$wrap} #{$menu} > li.mega-menu-item:not(:hover)  > a.mega-menu-link::before {
	width: 0;
	box-sizing: border-box;
}

• This reply was modified 4 years ago by Jay Mandell.
• This reply was modified 4 years ago by Jay Mandell.

Hi Julius,

Great, thanks for posting that here!

As a tip, it might be better to use the :after pseudo-element as the :before is used for icons.

Regards,
Tom