You will often see a menu that looks like this:
About | Services | Our Team | Contact
But if you want to use the CSS “border-right” to make that pipe after each menu item, how do you get rid of the pipe for the last menu item? Easy!
First, my CSS for my menu border looks like this:
#menu-main-menu li { border-right: 1px solid #666; padding: 0 7px; }
Then, I’ll use the CSS selector “last-child” to target the last item like this:
#menu-main-menu li:last-child { border-right: none; }
Viola! Last border pipe removed!
James Winsoar says
Thank you finally got it working thanks to your tip!