I’m attempting to modify my blog's navigation menu (http://reasonandfolly.com/) to replicate what is here: http://chimpchomp.us/

Two pieces represent a challenge: 1. The separators 2. The line on right/left of menus.

I’m fairly new to WP and can’t be certain if this requires a change to CSS or PHP.

Any guidance would be appreciated!


Difficult to give you an exact answer because I don't know the PHP code you are using to print the menu. You will need to have a loop and insert a // between the <LI> elements, except for the very last one because you don't want a // at the end of the menu.

For the CSS/HTML part you can follow chimpchomp's lead and insert a span between each <li>, like this:


You will need to amend the margin betern each LI so that the // appears exactly centred between the menu options. You have this at the moment:

header nav ul li {
display: inline;
margin: 0 0 0 20px;
padding: 0;

You could change this so that the margin is the same for left and right, something like:

margin: 0 10px 0 10px;
  • I'll try to digest in small pieces and see if I can catch up.. by menu php code, I imagine this is what you're looking for? (from header.php) </div><!-- /logo --> <nav> <?php wp_nav_menu( array( 'menu' => __('Main Menu', 'meanthemes'), 'theme_location' => 'primary', 'container' => false, 'menu_id' => false, 'menu_class' => false ) ); ?> </nav><!-- /nav --> </div> </header><!-- /header --> – RKB Dec 8 '12 at 23:00
  • I can see the <li>HOME</li> in html via firebug but can't tell which file needs to be edited to affect that change. – RKB Dec 8 '12 at 23:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.