Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>
share|improve this question
    
Did you try a custom walker? –  toscho Nov 11 '12 at 4:47
    
I did here it is, pastie.org/5361403 , but i cannot seem to get the subs out of the main ul. –  Matthew Woodard Nov 11 '12 at 17:26
    
Wouldn't it make sense to use two nav menus? –  TheDeadMedic Nov 12 '12 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. –  Matthew Woodard Nov 12 '12 at 19:26
add comment

1 Answer

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).

share|improve this answer
    
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 –  Matthew Woodard Nov 11 '12 at 17:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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