Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

spacing horzontal top menu - so no space at right

Go to End

5 Posts   859 Views


Community Member, 244 Posts

27 September 2011 at 11:17am

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


Community Member, 31 Posts

27 September 2011 at 12:38pm

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 %>

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:


Community Member, 244 Posts

27 September 2011 at 12:47pm


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 %> >


Forum Moderator, 5523 Posts

27 September 2011 at 7:28pm

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>


Community Member, 31 Posts

27 September 2011 at 7:37pm

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.