WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Menu separators (18 posts)

  1. mcrubbin
    Member
    Posted 2 years ago #

    I usually build sites on joomla, but a customer wanted a wordpress based one soo here I am trying to build one. and I'm stuck.

    NadiaAndDavid.com

    I'm trying to add menu separators, here's the code I have for the menu in my template:

    <li <?php if(is_home()) echo 'class="current_page_item"'; ?>><a href="<?php echo get_option('home'); ?>/" >Home</a></li>
    <li class="separator">&nbsp;</li>
    <?php wp_list_pages('title_li=&parent=0&') ;?>

    How can I add a menu separator after every menu item (except the last)?

  2. davejampole
    Member
    Posted 2 years ago #

    You could use a simple <hr /> which gives a simple horizontal line. You can use attributes such as `width="80%" height=2 noshade' between the hr and /, or you could do a google search for something like 'horizontal lines'. This should a ton of results.

  3. mcrubbin
    Member
    Posted 2 years ago #

    Where do I add <hr /> in the first place?

  4. davejampole
    Member
    Posted 2 years ago #

    Anywhere you want a horizontal line.

  5. mcrubbin
    Member
    Posted 2 years ago #

    Look at my php code... I need to add in images between each menu item not horizontal lines?

    I don't think you read my question..

  6. davejampole
    Member
    Posted 2 years ago #

    You're right - my mistake. I was seeing what I wanted to see.

  7. mcrubbin
    Member
    Posted 2 years ago #

    Thanks for the help anyway :)

  8. Gary Darling
    Member
    Posted 2 years ago #

    Try putting the character you want as a separator between a couple of &nbsp;'s in your list item:
    <li class="separator">&nbsp;|&nbsp;</li>
    I would have tested it first but your site keeps reloading every few seconds - must be something messed up in the code.

    Here is another WordPress menu way:

    <nav id="menu" role="navigation">
    	<?php wp_nav_menu( array(
    		'theme_location'  => 'header-menu',
    		'container'	  => '',
    		'menu_id'	  => 'main-nav',
    		'menu_class'	  => '',
    		'before'	  => '<span class="pipe"> | </span>'
    	) ); ?>
    </nav><!-- #menu -->

    The 'before' parameter adds the html with the pipe character, I used Jquery to remove it from the first list item.

  9. mcrubbin
    Member
    Posted 2 years ago #

    Reloading? Hmm...

    Where do I change this code? In my header.php?

  10. Gary Darling
    Member
    Posted 2 years ago #

    That's a good question - I had your page up for a couple minutes, when I checked the back button history it was full of reloads to that page. What theme are you using and where did you get it?

  11. mcrubbin
    Member
    Posted 2 years ago #

    K . I . S

    I pretty much took everything out of that template and started from scratch.

  12. mcrubbin
    Member
    Posted 2 years ago #

    Oh, and it doesn't reload. Well kinda I mean, when the slide changes your changes in firebug reset. Just go on another page and then test whatever you were trying to do

    Btw, I did stop the timer for now.

  13. Gary Darling
    Member
    Posted 2 years ago #

    Hmmm, seems ok now - strange.

    Try replacing your wp_list_pages with this:
    <?php wp_list_pages('title_li=&parent=0&link_before=<span class="separator"> | </span>') ;?>
    In between the span tags is whatever separator you want, probably with some spaces around it.

    You will notice a pipe character before the first item, we need to tackle that with some CSS:

    #menu-main-menu li:first-child .separator {
    display: none;
    }
  14. mcrubbin
    Member
    Posted 2 years ago #

    Seems like I had the wrong code before.. I should have gave you this in the beginning instead of that other code:

    <?php
    					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
                        <?php endif; ?>

    ^^ That's what displays my menu. I don't know where to find the actual code that generates the menu.

    And I added in the css that you gave me.

    But...

    If I do use this:

    <?php wp_list_pages('title_li=&parent=0&link_before=<span class="separator"> | </span>') ;?>

    Is there any way to organize it? Because for me it just set it in alphabetical order with the code above.

  15. mcrubbin
    Member
    Posted 2 years ago #

    ^^^ Ignore that last message.

    Answer: This ended up working:

    .nav li:first-child .separator {
        background: none;
    }

    Explanation: So I replaced my menu code with this:

    <?php wp_list_pages('sort_column=menu_order&title_li=&parent=0&link_before=<span class="separator"> </span>') ;?>

    Then I installed: My Page Order
    And organized my pages the way I wanted them.

    And then I styled in the separator as a image.

    Since the separator is a image, I added this class specifically to the first menu item:

    .nav li:first-child .separator {
        background: none;
    }

    YES! :) THANKS GUYS!

  16. Gary Darling
    Member
    Posted 2 years ago #

    Nice work! Maybe you could mark this as resolved?

  17. mcrubbin
    Member
    Posted 2 years ago #

    Good idea. Thanks!

  18. julifos
    Member
    Posted 1 year ago #

    Based on your comments, I ended up adding a custom "#" link with label "|", then adding this to the css:

    a[href="#"],a[href="#"]:hover,a[href="#"]:active,a[href="#"]:visited {
    	cursor: default;
    }

    (and whatever more rules you need, most probably a background to remove the hover effect)

Topic Closed

This topic has been closed to new replies.

About this Topic