Change highlight menu items on hover to underline on hover on wordpress

I'm having some difficulty tying to change the how the menu items would look as once hovered over. Currently it is set to highlight when hovered over but I would like it to be underlined instead.

enter image description here

1 answer

  • answered 2018-07-11 05:43 לבני מלכה

    Use text-decoration: underline; on hover and remove the color definetion :

    .navbar-nav > li > a:hover {
        color: black;
        text-decoration: underline;
    }
    

    As I see it override by other css so use !important

    .navbar-nav > li > a:hover {
        color: black!important;
        text-decoration: underline!important;
    }
    

    EDIT

    Can i increase the weight/thickness of the underline

    Use border-bottom instead text-decoration

    .navbar-nav > li > a:hover {
        color: black!important;
        text-decoration: none;
        border-bottom: 10px solid black;
    }