Menu Bar Separators

the | is actually a CSS border as stated in your stylesheet

#menu li a {
height: 25px;
padding: 0 5px 0 5px;
display: block;
float: left;
color: #6e86ad;
line-height: 25px;
text-decoration: none;
border-width: 0 1px 0 0;
border-style: solid;
border-color: #aaa;
}

It specifies a right border of 1px, solid, colored #AAA

Sorry to sound dumb, but what would I need to do to change it into the style of say a colon or slash? The only border-style’s I’m aware of wouldn’t allow me to do that, so would I delete the bolded portion of the CSS and input the slashes manually (if possible)?

if you delete the bold part – get the line under for border-color as well.

None of the normal list-style parameters are a colon or slash – (dot, square or circle). Possibly you could use a list-style-image, but that seems a bit contorted just get a slash.

Since these are added with a single call from your page template,

<?php wp_list_pages(); ?>

I’m not sure how you would add them manually without tinkering with deep WP code – or replacing the wp_list_pages call with some PHP code to do the same thing.

Might check this out

https://codex.www.ads-software.com/Template_Tags/wp_list_pages

The following snippet in your template will output the desired effect, just change | character in echo implode(‘ | ‘, $links); to whatever you like;

<?php
$links = get_pages();

foreach($links as $i => $page)
	$links[$i] = '<li class="page-' . (is_page($page->ID) ? 'active' : 'item') . '"><a href="' . get_page_link($page->ID) . '" title="' . attribute_escape(apply_filters('the_title', $page->post_title)) . '">' . apply_filters('the_title', $page->post_title) . '</a></li>';

echo implode(' | ', $links);
?>

You can add a link to the index by adding the following:

array_unshift($links, '<li class="page-item"><a href="' . get_option('home') . '" title="Home"> Home </a>');

before:

implode(' | ', $links);