Archived topic
How to style (underline) the current link on Abstract theme
5 replies · Started by Jung on April 16, 2021
Hello, I would like to have each link in the navigation to have an underline when it is active. For example, the screenshot shows that I am in work page therefore the work link is underlined. I have managed to get it work using a.wp-block-button_link:not(.has-background):active, but the effect disappears once I leave the customizer.
Is there a way to achieve this? Thank you.
Hi there,
i am surprised that CSS selector works - try this:
.main-navigation ul li:hover a {
/* add your styles here */
}Sorry David. I did not make myself clear or confused you with that :hover property in the screenshot. what I want to achieve is not hover state, but the active state. For example, when I am on a work page, only the work link ought to be underlined.
P.S Mike Oliver's Mason desktop version menu is exactly what I am looking to replicate.
This is the exact code Mason is using:
/* navigation hover lines */
@media (min-width: 769px) {
.main-navigation .menu > .menu-item > a:after {
content: "";
position: absolute;
right: 50%;
left: 50%;
color: #ccabc1;
top: -6px;
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: #cc5252;
transition: 0.3s width ease;
}
}
.main-navigation .menu > .menu-item > a:hover:after,
.main-navigation .menu > .menu-item > a:focus:after,
.main-navigation .menu > .current-menu-item > a:after{
width: 20px;
color: #cc5252;
}Thank you so much. Now I know if I want to replicate a certain style from other site library, the css customizer is the first place I will visit.
No problem :)
