How to style a link that matches the current URL?

Question

I'd like to add a CSS background color to any link in the sidebar navigation (#subnav) that matches the current URL exactly.

I've tried div#subnav a:active { background: #f1f2f2; }, but it didn't work.

Any help would be appreciated!

UPDATE: The code for the subnav is as follows:

<!-- START ALL PRODUCTS SUBNAV -->
{% if collection.handle == 'all' %}
<div id="back_link"><a style="background: none; color: #fff;" href="/collections/all">.</a></div>
<div id="subnav" style="margin-top: -33px;">{% if linklists.sub-navigation.links.size > 0 %}{% for link in linklists.sub-navigation.links %}
<li class="main_category_link"><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
</div>
{% endif %}
<!-- END ALL PRODUCTS SUBNAV -->

<!-- START HOME SUBNAV -->
{% if collection.handle == 'home' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>

<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
{% if linklists.sub-navigation-home.links.size > 0 %}
{% for link in linklists.sub-navigation-home.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;"href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END HOME SUBNAV -->

<!-- START CHILDREN SUBNAV -->
{% if collection.handle == 'children' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
{% if linklists.sub-navigation-children.links.size > 0 %}{% for link in linklists.sub-navigation-children.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END CHILDREN SUBNAV -->

<!-- START WOMEN SUBNAV -->
{% if collection.handle == 'women' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
{% if linklists.sub-navigation-women.links.size > 0 %}{% for link in linklists.sub-navigation-women.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END WOMEN SUBNAV -->

<!-- START PETS SUBNAV -->
{% if collection.handle == 'pets' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
{% if linklists.sub-navigation-pets.links.size > 0 %}{% for link in linklists.sub-navigation-pets.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END PETS SUBNAV -->

<!-- START GIFTS SUBNAV -->
{% if collection.handle == 'gifts' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
{% if linklists.sub-navigation-gifts.links.size > 0 %}{% for link in linklists.sub-navigation-gifts.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
</div>
{% endif %}
<!-- END GIFTS SUBNAV -->

<!-- START SALE SUBNAV -->
{% if collection.handle == 'sale' %}
<div id="back_link"><a href="#" onclick="history.go(-1);return false;">&larr; BACK</a></div>
<div id="subnav">
<div class="main_category_link"><a href="/collections/home">HOME</a></div>
<div class="main_category_link"><a href="/collections/children">CHILDREN</a></div>
<div class="main_category_link"><a href="/collections/women">WOMEN</a></div>
<div class="main_category_link"><a href="/collections/pets">PETS</a></div>
<div class="main_category_link"><a href="/collections/gifts">GIFTS</a></div>
<div class="main_category_link"><a style="margin-bottom: 0;" href="/collections/sale">SALE</a></div>
{% if linklists.sub-navigation-sale.links.size > 0 %}{% for link in linklists.sub-navigation-sale.links %}
<li><a href="{{ link.url }}"{% if link.url == collection.url %} class="active"{% endif %}>{{ link.title | escape }}</a></li>{% unless forloop.last %} {% endunless %}{% endfor %}{% else %}
{% endif %}
</div>
{% endif %}
<!-- END SALE SUBNAV -->

Can you post what the html looks like inside the subnav. That may affect the solution that is suggested. — Vincent Ramdhanie, Mar 18 '12 at 03:47

score 4 · Answer 1 · answered Mar 18 '12 at 03:44

The :active property is not what you think it is. On CSS world a link becomes active once you click on it. Of course this takes you to the page it linked to so in reality a link is active for a very short period of time.

There are several approaches you can take to do what you want. Add a class to the link you want to mark as active is the most obvious one:

Your HTML:

<a href="link.html">Link1</a>
<a href="link.html" class="active">Link2</a>
<a href="link.html">Link3</a>

Your CSS:

.active {
    font-weight: bold;
}

This way active link becomes bold. Of course this has to be done server-side.

Check here for other approaches, including one with JavaScript

Thank Jota! There is already an .active class, but I can't figure out how to add the class to link's that correspond to the current page's URL using the Shopify. — Travis, Mar 18 '12 at 22:06

Vincent Ramdhanie · Answer 2 · 2012-03-19T16:26:04.587

4

I hope that I interpreted your question correctly.

You may have to use some javascript to get this done. The current URL can be retrieved with:

  var url = document.URL;

Then you can compare this to the value in each link in a loop over all links. When you find one with the same value as the url you add some CSS to change the colour.

e.g.

  thelink.style.backgroundColor = "#F1F2F2";

And looping through the elements may be done something like this (Its been a while since I have done this without jQuery so I don't know how cross browser this is but it is a start.):

  var links = document.getElementById('subnav').elements;
  for(var i = 0; i < links.length; i++)
    {
          if(links[i].getAttribute('href') === url){
              links[i].style.backgroundColor = "#F1F2F2";
          }
    }

So, assuming that you have a bunch of <a> elements in the subnav div this will go through them and compare them to url of the current page and change the colour accordingly. This can be placed in a function that is bound to the onload event of the page.

Better yet, use jQuery to simplify the code and make it safer across multiple browsers.

Given your comment below then how about this jQuery solution:

   $(document).ready(function(){
    $("#subnav a").each(function(){
        if($(this).attr('href') == document.URL){
            $(this).css("background-Color", "red");
        }
    });
   });

So you can install jQuery and add this to the head of your page. It basically looks at each <a> element in the subnav div and compares the href attribute to the URL of the current page and makes a change to the css if they match. You can modify what change is made.

edited Mar 19 '12 at 16:26

answered Mar 18 '12 at 03:45

Vincent Ramdhanie

102,349
23
137
192

Thanks Vincent! I'm not quite sure how to implement the code you've mentioned. Could you explain how I could do so? Thanks! – Travis Mar 18 '12 at 22:26
@Travis Do you have, or are you willing to have jQuery in your project? If so then you can very easily do this. Let me know and I'll post some code. – Vincent Ramdhanie Mar 19 '12 at 00:32
I'm willing to do whatever it takes to get the background color to work for the link(s) that match the current URL. Thanks Vincent! – Travis Mar 19 '12 at 05:31
I added abit to the answer above that should help. – Vincent Ramdhanie Mar 19 '12 at 16:26
I added the following to my head code and it isn't working. Am I doing something wrong? – Travis Mar 20 '12 at 17:50
` ` – Travis Mar 20 '12 at 17:50
Do you need to use https to access the jquery library? Try putting the jquery-1.7.1.min.js file in a more accessible location outside of the admin area of the site. – Vincent Ramdhanie Mar 20 '12 at 17:59
I changed the file source to my site, and it still is not showing up. My code is:` ` – Travis Mar 21 '12 at 15:31
So you may need to check that jQuery is loading properly. Add alert("Here") as the first line after $(document).ready and add another alert as the first line in the each function. See if they are showing up when the page loads. In addition make sure you have firebug for fireworks installed so that you can see exactly what is going on on your page, it is an invaluable tool for debugging JavaScript. – Vincent Ramdhanie Mar 21 '12 at 22:54
I added the alert and it showed up when I reloaded the page, but the background color of the links is still not appearing. Any other possible solutions? – Travis Mar 23 '12 at 18:17
You have many divs with the id subnav. That is not allowed. Only one element on the page should have the id. If you want to target many divs then use class instead.
– Vincent Ramdhanie Mar 23 '12 at 23:05
Changed the id's to classes, and it still doesn't work. What else could it be? Thanks Vincent. – Travis Mar 26 '12 at 18:16

ryanve · Answer 3 · 2013-08-05T04:29:17.050

You can use JavaScript (gist) to add .current to anchors that match the current URL. a.href gives a complete URL even when the [href] attribute is relative.

//gist.github.com/ryanve/6153436
(function(anchors, url, i, a) {
  while ((a = anchors[i++]) && a.classList)
    a.href === url && a.classList.add('current');
}(document.getElementsByTagName('a'), location.href, 0));

Then you can style via CSS: .current { color:orange }

score 1 · Answer 4 · answered Mar 18 '12 at 03:30

1

You have a minor typo - instead of a:active, you should have a.active

div#subnav a.active {background: #f1f2f2;}

answered Mar 18 '12 at 03:30

random_user_name

25,694
7
76
115

It's not a typo :) Shopify automatically adds a class of 'active' to the main collection link but it does not automatically assign a 'active' class to the links that correspond to the sub-collection. I tried to add the css style :active to the link to see if it would change the background color, but it did not work. Thanks cale_b! – Travis Mar 18 '12 at 22:00

score 0 · Answer 5 · answered Mar 18 '12 at 03:55

I didn't think the Active pseudo class does this though - Active means the current selected link, so if you mouse over a link and click without releasing the mouse button, the Active style is applied.

I've made a fiddle demonstrating this here:

http://jsfiddle.net/39DuU/

If you mouse over a link it goes Lime; if you click on the link but don't release the mouse button it goes red.

An alternate might be to use Javascript/JQuery to achieve this which I've demonstrated here:

http://jsfiddle.net/39DuU/1/

How to style a link that matches the current URL?

5 Answers5

Linked