treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Stumper: How to add spacer in the center of a horizontal menu for a badge

  • Hi -- I'd like to use CSS to put a spacer in a Wordpress horizontal menu. The menu is bisected by a badge. So I want something like

    link1 link2 link3 [spa- Badge -cer] link4 link5 link6

    It would be great to allow the site owner to change the menu at will and not worry about messing up the flow of menu links around the badge.

    Can CSS do this???
  • You could use javascript to drop the badge in. That way it won't mess up the menu, rather work with it. So you would have (after javascript has added the badge):
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><img src="badge.jpg" alt="badge" /></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
    Is that what you're looking for?
  • Wow thank you for the fast reply. Actually I don't have the badge in the UL list. It is in a separate div, just overlaying the menu. This is to center it exactly.

    I think I will try this from a different angle (like, a different layout)