Adding | or images between autonav menu items

Permalink
Hi, is it possible to add the symbol | between the default autonav menu items (or better, an image) e.g:
Home About Us Contact ->
Home | About Us | Contact

Thanks

View Replies: View Best Answer
hutman replied on at Permalink Reply
hutman
This is something you would want to do in your theme's css, probably using :after
avra replied on at Permalink Reply
Thanks. The complication is that the last menu item would be different and not have the image after it, which I assume would mean modifying the autonav core block instead. I might just change the autonav to an html copy and tweak that.
hutman replied on at Permalink Reply
hutman
You can use the :last-child selector to account for that too.
avra replied on at Permalink Reply
Thanks. Looks like similar to this:https://www.concrete5.org/community/forums/usage/style-the-last-link... - I'll post the actual CSS on here when I work it out.
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Would this css work for you
ul li::before {
content: " | ";
}
ul li.first::before {
content: none;
}
avra replied on at Permalink Best Answer Reply
Yes. Thanks! To stop all the CMS li elements being like this (and also the submenu) I used this:

div.ccm-page header nav ul li::before {
content: " | ";color:#fff; padding-right: 14px;
}
div.ccm-page header nav ul li:first-child::before {
content: none;
}
div.ccm-page header nav ul li ul li::before {
content: none;
}
div.ccm-page header nav ul a {
padding-right:20px;
}
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Nice, Well done..