Primary navigation - how to add a green line under while hovering?

Hi there,

Luiz provided something cool here: https://generatepress.com/forums/topic/animating-link-underlines-for-main-menu/#post-200801

I loved that piece of code from Luiz. Went in the scrapbook, since then trimmed it, stripped it and added some FontAwesomeness to it as well. In the meantime, another scrapbook code for simple underlining:

.main-navigation .main-nav ul li a::after {
	display: block;
	content: ' ';
	border-bottom: solid 2px #00F;
	opacity: 0;
}
.main-navigation .main-nav ul li a:hover::after {
	opacity: 1;
}

Thank you so much Leo!

It worked perfectly.

Thanks David!

Glad we could help!

I got another question though. It works great when you are on PC-mode, but when you shift to tablet or phone the line goes through the text and not under it.

Try wrapping whichever CSS code you are using like this:

@media (min-width:769px) {
    hover CSS here
}

Brilliant, it worked!

Awesome :)

I got one more question.

I added the following code Leo, and it works really well. It also fixed the phone/tablet issue. The only problem there that occures is when i rolle down the page and the navigation follows, then the line is in the middle of the text. I fixed this by changing bottom from 15px to 7px. But when i roll back to the top the line is way under the text while hovering. Here the px would be perfect at 15, but 7px when i roll down the page.;

@media (min-width:769px) {
/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 50;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

display: block;
width: 0;
height: 2px;

background-color: currentColor;
transition: 0.3s width ease;
}

i found a solution, i changed bottom to 0px.

Awesome. Glad you found the the solution :)