Please help with the styling of a:active

  • Resolved altoidscreamer

    (@altoidscreamer)


    3 years, 8 months ago

    Hello,

    I’m trying to modify a menu item:

    .menu-item ul li a:active {
  text-decoration: underline;
}

    hoping to get an underline page menu when its on active state. Somehow, this isn’t working. It won’t even work with !important as well.
    I’m lost. Please help.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi there,

    This code should do the trick:

    li.menu-item.current-menu-item a {
	border-bottom: 1px solid rgb(60, 74,74);
}

    The underline that appears on menu links when you hover is actually a border, not a text-decoration, so I’ve used the same method to create an underline for the current menu item so it looks the same. If you use text-decoration you’ll see it’s right up against the text, which doesn’t look that nice.

    The color value is the same as the color used for menu items on a default installation of Seedlet. You’re welcome to substitute that with another color if you want.

    Thread Starter altoidscreamer

    (@altoidscreamer)

    Thank you for responding. I’m trying to get the bottom border to appear whenever I’m on the active page. For example, when I click ‘resume’ on the menu, the site will open the resume page and I want the bottom border to stay only under ‘resume’ on the menu. So far I’ve been trying to do this with a:active, so something like this:

    li.menu-item.current-menu-item a:active {
	border-bottom: 1px solid rgb(60, 74,74);
}

    but it doesn’t work ??

    Have you tried the code I provided to you above? There is no :active in my code, and my version works exactly the way you describe on my test site with this theme active.

    If my code is not working on your site, it means there’s other CSS on your site that’s overriding it, either custom CSS or something added by a plugin.

    I’d need a link to your actual site to help any further with this.

    Thread Starter altoidscreamer

    (@altoidscreamer)

    Ah, I totally missed the point of having .current-menu-item class in there and forgot to clear out my cache. I cleared it and now it works! Thanks a bunch!

    Yay ??

    Glad I could help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Please help with the styling of a:active’ is closed to new replies.