Underline Hover Color

Hi!

My navigation links are red and fade to black on hover. The active link is underlined. However, I can't figure out how to make the underline turn black as well when hovering; it remains red. Anyone know of any CSS that could help with that? Thanks.

Hi. Can you share site url? We can check easier

Yes! https://www.manumuniz.com (the password is manu), but since it's under construction I think the only page where you'll be able to see the problem is https://www.manumuniz.com/work

9 hours ago, manumuniz said:

Yes! https://www.manumuniz.com (the password is manu), but since it's under construction I think the only page where you'll be able to see the problem is https://www.manumuniz.com/work

Add to Design > Custom CSS > then save & Reload the site

/* nav hover underline color */
.header-nav-item a:hover {
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important;
}

@tuanphan Hmm, that's not exactly what I meant, let me try to explain it better. The navigation links are all red, and the active one is underlined. When I hover over the other items, they turn black, but if I happen to hover over the active link, the words turn black but the underline remains red. Is there a way to fix that so that the entire thing turns black?

On 6/19/2021 at 3:08 AM, manumuniz said:

@tuanphan Hmm, that's not exactly what I meant, let me try to explain it better. The navigation links are all red, and the active one is underlined. When I hover over the other items, they turn black, but if I happen to hover over the active link, the words turn black but the underline remains red. Is there a way to fix that so that the entire thing turns black?

Hi. Sorry for the delay. I don't see notification. Do you still need help?

Also, I see some other problems, need fix them? 

Site URL: https://www.manumuniz.com/home

1. (Mobile) There is a beige-color bar on right screen

https://www.manumuniz.com/home

2. (Mobile/Tablet – Header) Burger icon disappeared

https://www.manumuniz.com/work/film

3. (Mobile/Tablet – Menu) Increase menu item

4. (Mobile – Work > Photography) Want to make items is the same line?

https://www.manumuniz.com/work/photography

5. (Tablet/Mobile – Work > Photography) Reduce space

https://www.manumuniz.com/work/photography

6. (Mobile – Project > Photography) want to add a spacing between image – left/right of screen

https://www.manumuniz.com/photography

7. (Mobile – Project > Film) Text overlap

https://www.manumuniz.com/film

8. (Mobile/Tablet – Project > Writing) The same here

https://www.manumuniz.com/writing

9. (Mobile/Tablet – Homepage) Resize slideshow

@tuanphan hi, no worries!

i'm kind of ready to give up on the underline thing since nothing i've done so far has worked. but who knows, maybe you'll have a solution!

this is what my navigation links looks like:

this is what it looks like when i hover on a non-active page:

this is what it looks like if i happen to hover on the active page:

as you can see, the text (in this case, "projects") turns black as expected, but the underline marking it as the active page remains red. i was just hoping it could turn black along with the text.

--

as for all the other issues, i've currently done literally 0 work on reformatting the website for mobile hahah (i'm probably not even halfway done with the desktop)! i really appreciate the list though, it will give me a place to start once i get to that. hopefully you'll still be willing to help me out with some of those issues by the time i get around to fixing them :-)

On 7/9/2021 at 5:00 AM, manumuniz said:

@tuanphan hi, no worries!

i'm kind of ready to give up on the underline thing since nothing i've done so far has worked. but who knows, maybe you'll have a solution!

this is what my navigation links looks like:

this is what it looks like when i hover on a non-active page:

this is what it looks like if i happen to hover on the active page:

as you can see, the text (in this case, "projects") turns black as expected, but the underline marking it as the active page remains red. i was just hoping it could turn black along with the text.

--

as for all the other issues, i've currently done literally 0 work on reformatting the website for mobile hahah (i'm probably not even halfway done with the desktop)! i really appreciate the list though, it will give me a place to start once i get to that. hopefully you'll still be willing to help me out with some of those issues by the time i get around to fixing them :-)

Add to Design > Custom CSS > Then save & reload the site

/* nav underline hover black */
a.header-nav-folder-title:hover {
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important;
}