[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
  • #1198897



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



    Leo Customer Support

    Hi there,

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

    Let me know 🙂



    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?



    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



    is it possible to place normal underline in hover?


    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.