WordPress: How to add Separators | Divider Images in Horizontal menu

Wordpress– 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:


(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;}



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;}


Related Posts Plugin for WordPress, Blogger...

About Michael Bohatch - SimpleInbound

Michael Bohatch has been involved with SEO and Inbound Marketing since its inception. Michael provides professional services that combine his experience in Web Analytics, SEM, SEO and Inbound Marketing for a comprehensive strategic approach to web optimization. SimpleInbound.com is an advice blog where he documents some of his findings and advises others on industry updates.
This entry was posted in Wordpress and tagged , , , , . Bookmark the permalink.
If you would like to stay current on our Inbound Marketing Techniques, make sure to:
Subscribe to the RSS Feed!

Comments are closed.