hover line submenu

louwerj · October 7

https://test.troedoor.nl

I'm probably missing it, but I'd like to have the same color stripe under the submenu item as the main menu when I hover over it. Where can I find that?

Phil · October 7

Hi,

There is no setting to achieve that.

A custom CSS must be written to achieve that.

Do you need help with that?

Best regards

louwerj · October 7

Hi Phil, thanks for your quick response. But gladly, if you have it at hand ;-)

Phil · October 8

Use this CSS:

.mfn-header-menu .menu-item .sub-menu .menu-item a:before{
 content: "";
 position: absolute;
 left: 5%;
 bottom: 0;
 width: 90%;
 height: var(--mfn-header-menu-animation-height);
 background-color: var( --mfn-header-menu-animation-color);
 transform: scale3d(0, 1, 1);
 transition: transform 0.2s ease-in-out;
}
.mfn-header-menu .menu-item .sub-menu .menu-item:hover a:before{
 transform: scale3d(1, 1, 1);
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

louwerj · October 8

Works great Phil. Thxs again and have a nice day.

louwerj · November 18

Hi Phil, what should the css look like if I want only the active hover to be visible on the submenu. In the example all three are underlined.

Phil · November 18

Please try to replace classes path with the following ones:

.mfn-header-menu .menu-item .sub-menu > .menu-item:hover > a:before

.mfn-header-menu .menu-item > .sub-menu > .menu-item > a:before

Best regards

louwerj · November 19

Works great Phil. Thxs and have a nice day!

hover line submenu

Comments