d
Topic
kylebamford Member
Posts:
2
October 07, 2010

Add CSS Class to Last Item in Navigation List This post is outdated

Is there a way to add a CSS class to the last item in the dynamic list output? I'm looking for a way to be able to target just the last item without loosing the ability of the shop owner being able to add new nav items without having to redeploy the template each time.

This is what Shopify uses by default:

 

<div id="navigation">
	<ul id="navigate">
		<li><a href="/cart">View Cart</a></li>
		{% for link in linklists.main-menu.links reversed %}
			<li><a href="{{ link.url }}">{{ link.title }}</a></li>
		{% endfor %}
	</ul>
</div>

Thanks guys!

 

i
Replies
Posts:
86
October 07, 2010

Funny enough, I just had to do this last night for my new theme.  The following should work for you:

 

<div id="navigation">
	<ul id="navigate">
		<li><a href="/cart">View Cart</a></li>
		{% for link in linklists.main-menu.links reversed %}
			<li{% if forloop.last %} class="lastitem"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a></li>
		{% endfor %}
	</ul>
</div>

 

 

Ryan Meashaw Shopify Expert keenpixel.com
Posts:
333
October 07, 2010

You can also target, and style accordingly, the last element of a list strictly through CSS with:

 

 

li:last-child

 

 

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5860
October 07, 2010

Unfortunately there is no ie support for this suedo selector until version 9. I would stick to a class still.    :(

IE sucks, long live FF, Chrome, Opera, Safari, Flock etc etc etc. 

http://shopifyplus.com ::: http://twitter.com/bacchus
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5860
October 07, 2010
http://shopifyplus.com ::: http://twitter.com/bacchus
Ryan Meashaw Shopify Expert keenpixel.com
Posts:
333
October 07, 2010

Yeah, it's pretty much a given that something is not going to work in IE! Really wish they'd get their act together already.

Thanks Jamie!

Keenpixel - Custom Shopify themes: http://experts.shopify.com/keenpix , http://keenpixel.com , http://twitter.com/keenpixel
kylebamford Member
Posts:
2
October 07, 2010

Thanks Matthew, that worked perfectly!

Log in or sign up for an account to reply.

This thread has been closed! You will not be able to reply.