Question 11639 in Shopify Question posted in
The Shopify help center can be found here.

CSS: Can't get Active link to have extra styles – Shopify

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.

Tags:

2

Answers


  1. 0

    try

    #primary-menu> li.menu__active a {
    border-top: 2px solid #FFF;
    transition: none;
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search