Support » Fixing WordPress » Menu Bar Separators

  • Phillyzero


    Hi, I’m using a custom theme (ComicPress) and I was wondering how I would be able to change the separators from say Home|About|Blah to Home/About/Blah or Home : About : Blah or any character really. If it’s still unclear check the site, is this something to do with CSS or html. I’m having a tough time locating where it would be in my stylesheet, unless | is not an actual character and a default of some sort.

Viewing 5 replies - 1 through 5 (of 5 total)
  • myinstinctwaswrong


    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

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

    $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>');


    implode(' | ', $links);

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu Bar Separators’ is closed to new replies.