1

I have been trying to figure this out for a while. I need to overwrite the default output of the wordpress nav system.

Right now it is like:

<ul id="main-nav">
   <li class="menu-item">Parent Menu Item</li>
      <ul id="sub-menu">
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
      </ul>
   <li class="menu-item">Parent Menu Item</li>
      <ul id="sub-menu">
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
      </ul>
   <li class="menu-item">Parent Menu Item</li>
      <ul id="sub-menu">
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
            <li class="sub-menu-item">Parent Menu Item</li>
      </ul>
</ul>

What I am looking to do is this:

<div class="main-nav-wrap">
  <div class="container main-nav">
    <ul>
      <li id="home" class="nav-links"><a href="#"><span></span>Main Level Link</a></li>
      <li id="home" class="nav-links"><a href="#"><span></span>Main Level Link</a></li>
      <li id="home" class="nav-links"><a href="#"><span></span>Main Level Link</a></li>
      <li id="home" class="nav-links"><a href="#"><span></span>Main Level Link</a></li>            
    </ul>
  </div>

  <div class="main-subnav">
    <div class="container">
      <div class="sub-menu">
        <h2>Some title here</h2>
        <div class="sub-container">
          <ul class="grid_3 alpha">
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
          </ul>
          <ul class="grid_3">
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
          </ul>
          <ul class="grid_3 omega">
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
            <li><a href="#">Sub level link</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</div>
4
  • Did you try a custom walker?
    – fuxia
    Commented Nov 11, 2012 at 4:47
  • I did here it is, pastie.org/5361403 , but i cannot seem to get the subs out of the main ul. Commented Nov 11, 2012 at 17:26
  • Wouldn't it make sense to use two nav menus? Commented Nov 12, 2012 at 12:24
  • @TheDeadMedic - yes sir, that is what i ended up doing. Printing the main level links in my walker and the using wp_list_pages for my child menu items. Commented Nov 12, 2012 at 19:26

1 Answer 1

1

You could either try a custom walker as suggested above, or try to work it out via the number of invaluable arguments for the wp_nav_menu function. There are several parameters that you can use in order to change the container, list item ot entry classes, ids or even HTML tags. See if that would cause less troubles for adapting the standard menu to your custom variant (or would require just a cosmetic change).

1
  • Thanks Mario, I took a look at this and was able to wrap my sub ul in the necessary divs, the problem I am having is pulling them out of the main level ul ... here is my walker, pastie.org/5361403 Commented Nov 11, 2012 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.