[Support request] How to change hover effect on top menu?

[Anonymous]

Hello,

How I can change hover effect on top menu so instead of showing an underline when hovering it changes font color and background color?

Thanks!

[Leo]

Hi there,

Have you tried the options in Customizer > Colors > Primary Navigation?

Let me know 🙂

[Anonymous]

Hello Leo,

Yes I tried but, that is only to change color, I want to change hover effect from underline to changing background color, how can I do this?

Thanks!

[David]

Hi there,

the Underline effect is added to the Site using CSS in Customizer > Additional CSS – remove the following to remove the underline:

@media (min-width: 769px) {
    .main-navigation ul li {
        position: relative;
    }

    .main-navigation ul li:after {
        content: '';
        position: absolute;
        height: 0;
        width: 100%;
        bottom: 0;
        left: 0;
        pointer-events: none;
        filter: hue-rotation(90deg);
        -webkit-filter: hue-rotation(90deg);
        -webkit-transition: height 0.35s ease;
        transition: height 0.35s ease;
    }

    .main-navigation ul li:hover:after, .main-navigation ul li.current-menu-item:after {
        height: 6px;
    }
}

The background hover color is controlled where Leo said in Customizer > Colors > Primary Navigation

[Anonymous]

is it possible to place normal underline in hover?

[David]

Try this CSS:

.main-navigation ul li:hover a {
    text-decoration: underline;
}

[Author]

Posts