My site, like many others, has a menu bar with 6 or 7 main menu links horizontally at the top

I'm using ul > li > a html strucuture, and i've set a width, and margin right for each link.

However, the link on the far right shouldn't have a margin-right, becuase i want it flush against the right side of the page.

So, two questions:
is it possible to add an extra css tag to the 'last' link to the displayed in menu level 1. -(I could reference an ID of the link, but if the menu is changed by the client this ID moves too)

2ndly: what if the client adds another top level menu - does anyone know any nifty tricks to adjust the widths of all the menus so that they still fit neatly filling the one line...

many thanks

Hi Jonshutt,

You could use a CSS selector like the one below, which should work but may have problems in some browsers.

ul#mainNav li:last-child{margin-right: 0;}

Or :first-child, depending on how you've aligned the list items.

There is a SilverStripe way to do it using the <% if Last %> statement in your template and assigning a separate class or id to that item.

<ul id="mainNav">
      <% control Menu(1) %>
            <% if Last %>
                  <li id="lastNavLink">...</li>
            <% else %>
                  <li class="navLink">...</li>
            <% end_if>
      <% end_control %>
</ul>

And then the CSS could look like this:

ul#mainNav li.navLink {margin-right: 10px;}
ul#mainNav li#lastNavLink {margin-right: 0;}

I found that <% if Last %> statement in this super handy Page Controls page: http://doc.silverstripe.org/sapphire/en/reference/built-in-page-controls

Great!

I was trying to avoild the css last-child thing, but the SS class works great

i've simply used it like this:

<li <% if Last %>class="lastNavLink"<% end_if %> >

You can also use $FirstLast which will return 'first', 'last' or ''. It's also described on the page controls page linked to above.

<li class="$FirstLast">..</li>

Cheers Willr, I skimmed over that $FirstLast mention on the doc and didn't quite catch what it did. That looks perfect, I'll definitely give it a go on my next project.