Using characters to separate menus in navigation bar

3 Views

I’m attempting to modify my blog’s navigation menu (http://reasonandfolly.com/) to replicate what is here: http://chimpchomp.us/

Two pieces represent a challenge: 1. The separators 2. The line on right/left of menus.

Read More

I’m fairly new to WP and can’t be certain if this requires a change to CSS or PHP.

Any guidance would be appreciated!

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Difficult to give you an exact answer because I don’t know the PHP code you are using to print the menu. You will need to have a loop and insert a // between the <LI> elements, except for the very last one because you don’t want a // at the end of the menu.

    For the CSS/HTML part you can follow chimpchomp’s lead and insert a span between each <li>, like this:

    <li>HOME</li>
<span>//</span>
<li>HOME</li>

    You will need to amend the margin betern each LI so that the // appears exactly centred between the menu options. You have this at the moment:

    header nav ul li {
display: inline;
margin: 0 0 0 20px;
padding: 0;
}

    You could change this so that the margin is the same for left and right, something like:

    margin: 0 10px 0 10px;