Collection page - Nav menu with active css

Solved
New Member
4 0 0

I'm probably going about this all wrong, but I've torn most of my hair out trying to get this to work.

 

In my collections.liquid page, I've created a little menu bar that links to all my collections. Easy, right? The code looks like this in it's most basic form (it's gone through 400+ iterations today, so I'll bring it back to the very very basics):

<ul class="sub-nav clearfix" id="nav">  
          {% for collection in collections %}
              <li class=" sub-nav">
                  <a href="{{ collection.url }}">{{ collection.handle }}</a>
                </li> 
          {% endfor %}
</ul>
    

All this does is create links to my collections and it looks like this:

Featured   Civic   Education  Housing

 

But what i can't get working, is for whichever link is the active link, I can't add the CSS property "active" to the appropriate <li> tag when it is clicked. It's making me crazy! I've tried conditional statements, i've tried javascript but nothing has worked 100% properly. As you can see in the above code, I'm not adding it there, just to keep things simple.

 

If you know what I'm missing, please let me know!

0 Likes

Success.

Why not just use the linklist object? https://help.shopify.com/en/themes/liquid/objects/linklist

 

Add the collections to the proper menu and you're good to go.

Making Shopify Tasks Straight Forward. Contact me directly to get help with your Shopify website quickly and painlessly.

Website: https://theshoptinkerers.com/
1 Like
New Member
4 0 0

"Why not" you ask? Because I had no idea that was an available feature! Thank you!!

What I just spent all day hacking away at, I was able to get it working in about 10 minutes using the linklist object (which i'd never heard of before). 

 

Here's my working code now:

<ul class="sub-nav clearfix" id="nav">
         {% for link in linklists.myCollections.links %}
          <li class=" sub-nav">
              <a href="{{ link.url }}"{% if link.current %}aria-current="page" class="active" style="color:white;"{% endif %}>{{ link.title }}</a> 	
          </li>
	 {% endfor %}

It was ignoring one of my styles so I just put it inline just so I could have a bit of success before I left for the evening.

 

Thank you again!

0 Likes