Jump to content

Underline Hover Color

Recommended Posts

  • Replies 7
  • Views 633
  • Created
  • Last Reply
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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?

Link to comment
  • 3 weeks later...
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

manumuniz.com-01-Mobile-min.png

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

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

manumuniz.com-02-Mobile-Tablet-burger-mi

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

 

manumuniz.com-03-Mobile-Tablet-menu-min.

 

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

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

manumuniz.com-05-Mobile-work-photography

 

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

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

manumuniz.com-04-Tablet-Mobile-Work-phot

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

https://www.manumuniz.com/photography

manumuniz.com-06-Mobile-Project-Photogra

7. (Mobile – Project > Film) Text overlap

https://www.manumuniz.com/film

manumuniz.com-07-Mobile-Project-Film-min

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

https://www.manumuniz.com/writing

manumuniz.com-08-Mobile-Tablet-writing-m

9. (Mobile/Tablet – Homepage) Resize slideshow

manumuniz.com-09.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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:

1103553429_ScreenShot2021-07-08at6_56_51PM.png.6e377ceea6daf1f04a45b211ee5fd5b4.png

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

181479379_ScreenShot2021-07-08at6_56_58PM.png.91ab3178eb3892326b672c5ade76af0f.png

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

757004563_ScreenShot2021-07-08at6_57_04PM.png.1c85a256f236517c3da5111f081e46c5.png

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 :-)

Link to comment
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:

1103553429_ScreenShot2021-07-08at6_56_51PM.png.6e377ceea6daf1f04a45b211ee5fd5b4.png

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

181479379_ScreenShot2021-07-08at6_56_58PM.png.91ab3178eb3892326b672c5ade76af0f.png

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

757004563_ScreenShot2021-07-08at6_57_04PM.png.1c85a256f236517c3da5111f081e46c5.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.