[Support request] Underline for Hover & Active Menu Item

Log In Free Support

Popular Articles

Missing style.css

Updating errors

Installing GP Premium

Installing GeneratePress

This topic has 4 replies, 3 voices, and was last updated 3 years, 3 months ago by Carsten.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 18, 2022 at 6:55 pm #2466440

yitegele

Hi GP!

Please help add an underline (inline width) for hover & active menu item. Thank you!

Please see my temporary website.

December 18, 2022 at 7:03 pm #2466445
Fernando
Customer Support
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.
December 18, 2022 at 7:14 pm #2466455

yitegele

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!

December 18, 2022 at 7:27 pm #2466468
Fernando
Customer Support
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;
}
```
January 18, 2023 at 12:09 pm #2500682

Carsten

Please disregard this post.
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.