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
Home About Us Contact ->
Home | About Us | Contact
Thanks
This is something you would want to do in your theme's css, probably using :after
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.
You can use the :last-child selector to account for that too.
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.
Would this css work for you
ul li::before { content: " | "; } ul li.first::before { content: none; }
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;
}
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;
}
Nice, Well done..
