change nav link to be different text on hover

Site URL: https://www.kailynmoore.com/

Hi! I made my nav links emojis, and I want to be able to hover over each and see the actual name of the page: ie: "WORK" "PLAY" "ABOUT"

Any help would be greatly appreciated. Thanks in advance!!!

🙏

you could try something like :nth child selector :after to add the text to each respective link, and hide it , show on hover, when you hide the emoji instead

21 hours ago, kailynmoo said:

Site URL: https://www.kailynmoore.com/

Hi! I made my nav links emojis, and I want to be able to hover over each and see the actual name of the page: ie: "WORK" "PLAY" "ABOUT"

Any help would be greatly appreciated. Thanks in advance!!!

🙏

 

 

 

You mean

Hover pen icon >> it shows About text?

5 hours ago, tuanphan said:

You mean

Hover pen icon >> it shows About text?

yes! exactly.

On 4/30/2021 at 2:29 AM, kailynmoo said:

yes! exactly.

Add to Design > Custom CSS

div.header-nav-item:hover a {
    visibility: hidden;
}
div.header-nav-item:hover a:after {
    visibility: visible;
    content: "About";
}

On 5/1/2021 at 3:11 AM, tuanphan said:

Add to Design > Custom CSS

div.header-nav-item:hover a {
    visibility: hidden;
}
div.header-nav-item:hover a:after {
    visibility: visible;
    content: "About";
}

 

THANK YOU! this worked, but they all say 'about' now when i hover---any way i can have a different hover for each of the icons/nav-items?

for instance, when i hover over the 1st icon, it would say "work"; when i hover over the second icon, it would say "play"; and the last one would say "about"

21 hours ago, kailynmoo said:

THANK YOU! this worked, but they all say 'about' now when i hover---any way i can have a different hover for each of the icons/nav-items?

 

for instance, when i hover over the 1st icon, it would say "work"; when i hover over the second icon, it would say "play"; and the last one would say "about"

I see 1 icon (pencil) only? Where other icons?

13 hours ago, tuanphan said:

I see 1 icon (pencil) only? Where other icons?

See  below. Perhaps its because the emoijs are not supported on your device?

On 5/5/2021 at 10:31 AM, kailynmoo said:

See  below. Perhaps its because the emoijs are not supported on your device?

I use WIndows/Chrome