Formatting last menu item
Permalink
Guys,
I've created my own theme and have formatted the navigation div using CSS.
When editing the site I have inserted Autonav into the main nav block which is in the navigation div and this takes on the CSS navigation styling fine.
See my test site at:http://79.170.44.77/alanfeeney.co.uk/...
What I can't fgure is how to remove the last menu item's rightside border! This is easy in a standard HTML where I can use a tag to remove (or add) the border easily. With C5 I have no idea where to look as I'm not a developer.
Anybody know please!
Ian
I've created my own theme and have formatted the navigation div using CSS.
When editing the site I have inserted Autonav into the main nav block which is in the navigation div and this takes on the CSS navigation styling fine.
See my test site at:http://79.170.44.77/alanfeeney.co.uk/...
What I can't fgure is how to remove the last menu item's rightside border! This is easy in a standard HTML where I can use a tag to remove (or add) the border easily. With C5 I have no idea where to look as I'm not a developer.
Anybody know please!
Ian
I would think you need to create an autonav template that adds a .noborder class to the last item in the loop. If I get time, I will try to come up with something.
I took a little different approach. What I actually did was similar to the breadcrumb template which generates a >> before each item with the exception of the first. This template add a .border class to each li with the exception of the first. So you should be able to do border-left and get the desired results. I hope this helps. The template is attached. Simply add the border.php file to your autonav templates folder and you should be able to use it. :)
Dear Dwayne,
Thanks very much for taking the time. I downloaded the attachement and inseted the border.php file but no no effect I am afraid.
Ian
Thanks very much for taking the time. I downloaded the attachement and inseted the border.php file but no no effect I am afraid.
Ian
Ian,
If you want I can look at your code and help you with the way I suggested. It is much easier as the 'first' class is already in the auto-nav and just needs the CSS adding to it.
Ben
If you want I can look at your code and help you with the way I suggested. It is much easier as the 'first' class is already in the auto-nav and just needs the CSS adding to it.
Ben
Be great Ben, thanks. What do you need from me?
I'm not a php developer by the way - just so you know!
Ian
I'm not a php developer by the way - just so you know!
Ian
Ian,
Just add this to the CSS
That should do it as you have already switched to left-border on the <li> tags.
Cheers
Ben
Just add this to the CSS
.navigation li.first { border:none; }
That should do it as you have already switched to left-border on the <li> tags.
Cheers
Ben
Ben,
I saw AC's answer below first and it worked but yours seems pretty similar. Thanks so much for your help!
Ian
I saw AC's answer below first and it worked but yours seems pretty similar. Thanks so much for your help!
Ian
Just check it in IE though as can play up a bit with :first-child.
Ben
Ben
It is easier to do it the other way round. The first menu item has a class of 'first' so you can give them all a left border and then remove the border on the first item. Drop me a PM if you need more explanation.
Ben
Ben
I think this is probably your best bet. Both ways will work, but Ben's suggestion works out of the box. Thanks Ben. I didn't even think about that. :)
No worries. :)
Don't know if you have figured this out but here is how i did it...
add border-left to the li
#navfooter li {
display: inline;
border-left: 1px solid #c3dcd8;
}
Then add an extra style like this
#navfooter li:first-child {
border-left: none;
}
Worked OK for me:-)
add border-left to the li
#navfooter li {
display: inline;
border-left: 1px solid #c3dcd8;
}
Then add an extra style like this
#navfooter li:first-child {
border-left: none;
}
Worked OK for me:-)
Ac,
You star! It worked...well after I remembered to add the id to the page's css! See:http://79.170.44.77/alanfeeney.co.uk/...
Thanks for that.
You star! It worked...well after I remembered to add the id to the page's css! See:http://79.170.44.77/alanfeeney.co.uk/...
Thanks for that.
:first-child can be a bit dodgy in IE though, using the built in class of 'first' is a lot simpler.
Ben
Ben
Ben,
Weirldy enough the class first-child works fine in IE7/8/9 and class first doesn't work in IE7/8/9!
I just tested it!
Ian
Weirldy enough the class first-child works fine in IE7/8/9 and class first doesn't work in IE7/8/9!
I just tested it!
Ian
Thats weird. I use that method all the time, maybe something went awry in the code.
As long as it works thats the main thing. The problem that IE has is that it will not update the style on a dynamically added element when using first-child, but you should be OK on that account I would think.
Ben
As long as it works thats the main thing. The problem that IE has is that it will not update the style on a dynamically added element when using first-child, but you should be OK on that account I would think.
Ben
