How to add a special character between pages in the top nav bar? (8 posts)

  1. maorb
    Posted 6 years ago #

    Hi all,

    I want to add a character, let's say "|" between listing pages in the top bar, when using the wp_list_pages() function.
    I've found some discussions about it, but no one had real good solution for me.

    I tried to use this code for example -

    $char = ' | ';

    The problem is the the character is being displayed very close to the page name, and I want it to be in the center between one page to another one.

    Another problem with this, is that the character is part of the link, since it's being added inside the a anchor tag, so even if there was a way to add some space between the character and the page name, it would all be part of the link to the page, which is not what I want..

    Is there another way to do that? Or I will have to give up using the wp_list_pages() in this case and build a manual list? (which is also not so good at all..)


  2. esmi
    Forum Moderator
    Posted 6 years ago #

    Stick with wp_list_pages and try using CSS to display a character or list bullet before each item.

  3. maorb
    Posted 6 years ago #

    Thanks for the advise esmi.

    How could I display a character with CSS before each item without making it a background image?

  4. esmi
    Forum Moderator
    Posted 6 years ago #

    Use list-style-image if you want to add a list bullet. Or you can use the before or :after pseudo elements to place generated content before (or after) the link.


  5. maorb
    Posted 6 years ago #

    Do you know if the pseudo elements li:before and after support also IE7?

  6. esmi
    Forum Moderator
    Posted 6 years ago #

    Sorry - no. Only the better browsers (and IE8) support this.

  7. maorb
    Posted 6 years ago #

    I thought so :(
    That's a problem, since I have to write a code which will support also the nagging IE7 as well..
    Are there any other ideas for that?

  8. esmi
    Forum Moderator
    Posted 6 years ago #

    A list bullet image or perhaps a border-left on the <li> tag would probably be your best (and safest) bet.

Topic Closed

This topic has been closed to new replies.

About this Topic