– How to add separators | Divider images in Horizontal menu for the Twenty Ten theme
– Adding a divider image to your WordPress menu
– Adding a divider stroke to your menu
– Adding a separator between your navigation links
I thought I’d take the time to post this as it took me a while to get it right after trying a variety of CSS code variations.
It was after trying all of them that I realized that a css style was still needed to be added to make it work
1- open your style.css file
2- scroll down the “menu” section of your css (twenty ten section starts with /* =Menu)
3- make sure to “first” upload your gif image to your server, mine for instance was located in:
http://yoursite.com/images/navdivider.gif
(for reference the file was 2×46 pixels solid grey)
4- paste in this line of code (though swap out your own site info) into your style.css file
#access li { background: url(http://yoursite.com/images/navdivider.gif) no-repeat right center;}
5- SAVE
_____________________________________________________
How to add “just” a stroke to this menu (instead of image) as a divider
1- follow steps 1-2 above
2- scroll down to the section noted below, and add this new line of code
#access a {border-right: 1px solid #525252;}
3- SAVE
