- This topic has 10 replies, 3 voices, and was last updated 4 months, 3 weeks ago by
David.
-
AuthorPosts
-
October 5, 2020 at 10:16 pm #1474001
Bogdan
Hello
I’ve added this menu hover animation from your documentation:
@media (min-width: 769px) { .main-navigation .menu > .menu-item > a::after { content: ""; position: absolute; right: 0; left: 50%; bottom: 15px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 2px; color: #E0202C; background-color: currentColor; transition: 0.3s width ease; } .main-navigation .menu > .menu-item.current-menu-item > a::after, .main-navigation .menu > .menu-item.current-menu-ancestor > a::after, .main-navigation .menu > .menu-item > a:hover::after { width: 50%; } }
It works great and looks neat.
Now I want to add the same effect for the links inside every article and for the header links (like the ones on the home page, category pages, archives, etc.)
Can you please help me do that?My site is Optimize My Life
October 5, 2020 at 10:23 pm #1474005Bogdan
PS: I’ve just noticed that the navigation search stopped working after adding the above css. How can I fix that?
October 5, 2020 at 10:53 pm #1474020Elvin
StaffCustomer SupportHi,
Now I want to add the same effect for the links inside every article and for the header links (like the ones on the home page, category pages, archives, etc.)
Can you please help me do that?You can try this out.
@media (min-width: 769px) { /* for articles */ article > .inside-article a{ position:relative; } article > .inside-article a:after { content: ""; position: absolute; right: 0; left: 50%; bottom: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 2px; color: #E0202C; background-color: currentColor; transition: 0.3s width ease; } article > .inside-article a:hover:after { width: 50%; } /* For page hero*/ .page-hero a{ position:relative; } .page-hero a:after { content: ""; position: absolute; right: 0; left: 50%; bottom: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 2px; color: #E0202C; background-color: currentColor; transition: 0.3s width ease; } .page-hero .inside-article a:hover:after { width: 50%; } }
Please do mention if I missed anything you want this applied to. Thank you.
A wise man once said:
"Have you cleared your cache?"October 6, 2020 at 4:24 am #1474387Bogdan
Hi Elvin,
this does work, but it also adds the same effect to almost everything else that is clickable, including images and buttons (which looks weird). I want to exclude such elements and have it only appear for the links in the text and the headers.
October 6, 2020 at 6:03 am #1474505David
StaffCustomer SupportHi there,
try this CSS:
@media (min-width: 769px) { .entry-content p > a, .page-hero a { position:relative; } .entry-content p > a:after, .page-hero a:after { content: ""; position: absolute; right: 0; left: 50%; bottom: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 2px; color: #E0202C; background-color: currentColor; transition: 0.3s width ease; } .entry-content p > a:hover:after, .page-hero a:hover:after { width: 100%; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 6, 2020 at 11:53 am #1475124Bogdan
Thank you David!
This works great for the links inside the posts.
Is there a way to add the same effect if you hover over the post titles on the home page or category pages?October 6, 2020 at 4:02 pm #1475442Elvin
StaffCustomer SupportYou can try this code. This specifically targets the post titles on home and any archive pages.
@media (min-width: 769px) { /* for articles */ article.post > .inside-article > .entry-header > .entry-title > a{ position:relative; } article.post > .inside-article > .entry-header > .entry-title > a:after { content: ""; position: absolute; right: 0; left: 50%; bottom: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 2px; color: #E0202C; background-color: currentColor; transition: 0.3s width ease; } article.post > .inside-article > .entry-header > .entry-title > a:hover:after { width: 50%; } }
A wise man once said:
"Have you cleared your cache?"October 6, 2020 at 10:18 pm #1475737Bogdan
Thanks Elvin, that code does the job quite well.
Just one small problem: for longer titles, only the text on the second row gets animated
like this
Is there a way to fix that?
October 7, 2020 at 3:25 am #1476118David
StaffCustomer SupportNothing can be done to fix that.
The closest you can get is an underline expanding from start to end using this CSS:article.post>.inside-article>.entry-header>.entry-title>a, .entry-content p>a, .page-hero a { text-decoration: none; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(#c73337, #c73337); background-size: 100% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.2s linear; } article.post>.inside-article>.entry-header>.entry-title>a:hover, .entry-content p>a:hover, .page-hero a:hover { background-size: 0 2px, 100% 2px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 7, 2020 at 5:54 am #1476354Bogdan
Got it. That’s not such a problem.
Thank you both for helping me out.
October 7, 2020 at 7:05 am #1476470David
StaffCustomer SupportGlad we could be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.