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

Home Forums Support How to change hover effect on top menu?

This topic contains 5 replies, has 3 voices, and was last updated by  David 2 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1198897

    Sara

    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!

    #1198931

    Leo Customer Support

    Hi there,

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

    Let me know 🙂

    #1199287

    Sara

    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!

    #1199301

    David Customer Support

    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

    #1201632

    Sara

    is it possible to place normal underline in hover?

    #1201850

    David Customer Support

    Try this CSS:

    .main-navigation ul li:hover a {
        text-decoration: underline;
    }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.