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.
Where do I add <hr /> in the first place?
Anywhere you want a horizontal line.
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..
You’re right – my mistake. I was seeing what I wanted to see.
Thanks for the help anyway 🙂
Try putting the character you want as a separator between a couple of ‘s in your list item:
<li class="separator"> | </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.
Reloading? Hmm…
Where do I change this code? In my header.php?
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?
K . I . S
I pretty much took everything out of that template and started from scratch.
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.
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;
}
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.
^^^ 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!
Nice work! Maybe you could mark this as resolved?
