Underline for Hover & Active Menu Item

Hi Yitegele,

Can you try adding this through Appearance > Customize > Additional CSS?:

div#primary-menu > ul > li:hover:after, div#primary-menu > ul > li.current-menu-item:after {
    content:"";
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

div#primary-menu > ul > li{
    position:relative;
}

Let us know how it goes.

Hi Fernando!

Thank you for your help.

I changed the above background-color to my main color, and only the underline width is not correct. It looks too wide and not inline width. Please help with it. Thank you!

I see. Try this instead:

div#primary-menu > ul > li:hover:after, div#primary-menu > ul > li.current-menu-item:after {
    content:"";
    position: absolute;
    bottom: 10px;
    width: 60%;
    transform:translateX(30%);
    height: 2px;
    background-color: #23AC38;
}

div#primary-menu > ul > li a{
    position:relative;
}

Please disregard this post.