How to make menu links underline on hover, but not the submenu icon?

  • Hello there, I have a question. I would like to make the menu links underline on hover and I tried this code:

    #primary-menu > .menu-item > .menu-link{
    text-decoration:underline
    }

    It works, but there is one problem. The submenu icon/sign (I dont know how its called) next to the menu link is also underlined. This is how it looks like:
    https://i.ibb.co/s6MSfKL/Sn-mek-obrazovky-2020-09-28-164801.jpg

    This looks a bit weird. Is there a way how to underline on hover links only, but not this icon/sign?

    Thank you for any tips ??

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @acuaron,

    Sorry for the delay.
    ?
    ??Do you have any site URL we can check?

    ??Kind regards,
    ?Herman ??

    ??P.S. We recommend reaching out to us through our Support Portal for faster and quicker help and resolution as mentioned here.

    Hello @acuaron,

    Please try the below CSS.

    #primary-menu li a,
    {
    text-decoration: none;
    position: relative;
    color: #ffffff;
    padding-bottom: 3px;
    }

    #primary-menu li a:after{
    content: ‘ ‘;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 2px solid #ffffff;
    transition: 0.4s;
    }

    #primary-menu li a:hover:after {
    width: 100%;
    }

    I hope the CSS will work for you.

    ??Kind regards,
    Avinash.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make menu links underline on hover, but not the submenu icon?’ is closed to new replies.