CSS: Can't get Active link to have extra styles-CodePudding

I'm trying to get the active page link on this Shopify store to have a top white border. Tried all sorts of things and nothing is working. I would just think I need

#main-header .dropdown.menu > li > a:active {
    border-top: 2px solid #FFF;
    transition: none;
}

Tried a:focus too but no luck.

CodePudding user response：

try

#primary-menu> li.menu__active a {
    border-top: 2px solid #FFF;
    transition: none;
}

CodePudding user response：

a:active is the state of the link after being clicked until the new page is loaded, which is usually a very short time, often even invisible. If you click and hold on a link in your page, you see the applied border-top appearing

If however by "active link" you mean the link of the page which you are currently on, that's not a:active, but the .menu__active class which is added via JS by the website to the li parent of the menu link (not automatically - there has to be a script that does that, which a lot of frameworks and themes/templates have included).

So in this case, just use .menu__active class as the selector for the CSS rule of the li element of that link. But you probably might have to make the selector more specific to overrule other rules, like #main-header .dropdown.menu > li.menu__active > a.