0

I am trying to replicate this drop-down menu in a Wordpress theme:

enter image description here

But I've spent my whole week to only get this result:

enter image description here

(The sections items are properly handled, but their sub-items are a mess! "Sub Item with Link 1", "About" & "Contact")


The html snippet of the original menu I am trying to convert into Wordpress is here:

<nav class="main-nav">
  <ul id="nav" class="menu">
    <li id="menu-item" class="menu-item">
      <a href="#">Menu Main Item 1</a>
      <span class="mobile-sub-menu-opener">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="10"
          enable-background="new 0 0 15 10"
          viewBox="0 0 15 10"
          x="0px"
          y="0px"
          xml:space="preserve"
          version="1.1"
        >
          <g>
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="0"
              width="15"
              height="2"
            />
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="4"
              width="15"
              height="2"
            />
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="8"
              width="15"
              height="2"
            />
          </g>
        </svg>
      </span>
      <div class="slide">
        <ul class="col">
          <li id="menu-item" class="menu-item">
            <a>Menu Main Item 1</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">Sub Item with Link 1</a>
              </li>
            </ul>
          </li>
          <li id="menu-item" class="menu-item">
            <a>Help Section</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">About</a>
              </li>
              <li id="menu-item" class="menu-item">
                <a href="#">Contact</a>
              </li>
            </ul>
          </li>
          <li id="menu-item" class="menu-item">
            <a>Section 3</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">Sub</a>
              </li>
              <li id="menu-item" class="menu-item">
                <a href="#">Sub</a>
              </li>
            </ul>
          </li>
          <li id="menu-item" class="menu-item">
            <a>Section 4</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">Sub</a>
              </li>
              <li id="menu-item" class="menu-item">
                <a href="#">Sub</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
    <li id="menu-item" class="menu-item">
      <a href="#">Menu Main Item 2</a>
      <span class="mobile-sub-menu-opener">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="15"
          height="10"
          enable-background="new 0 0 15 10"
          viewBox="0 0 15 10"
          x="0px"
          y="0px"
          xml:space="preserve"
          version="1.1"
        >
          <g>
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="0"
              width="15"
              height="2"
            />
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="4"
              width="15"
              height="2"
            />
            <rect
              clip-rule="evenodd"
              fill-rule="evenodd"
              x="0"
              y="8"
              width="15"
              height="2"
            />
          </g>
        </svg>
      </span>
      <div class="slide">
        <ul class="col">
          <li id="menu-item" class="menu-item">
            <a>Section 1</a>
            <ul class="sub-menu">
              <li id="menu-item" class="menu-item">
                <a href="#">Sub-section</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
  </ul>
  <div class="mobile-show">
    <div class="nav-login">
      <a href="#" class="btn btn-register"
        >Your Account<span class="ripple-wrapper"></span
      ></a>
    </div>
    <div class="nav-login help">
      <a href="#" class="btn btn-register"
        >Help<span class="ripple-wrapper"></span>
      </a>
    </div>
  </div>
</nav>

And here's what I've done so far to try to get that right, used a custom Walker_Nav_Menu:

class Child_Wrap extends Walker_Nav_Menu
{
    function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n<div class='slide'>$indent<ul class=\"col\">\n";
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

Then wrote this to show the menu:

<nav class="main-nav">
  <!-- Menu Goes Here -->
    <?php
    wp_nav_menu( array( 
        'menu'            =>  'primary',
        'theme_location'  =>  'primary',
        'menu_id'         =>  'nav',
        'container'       =>  '',
        'after'           =>  '<span class="mobile-sub-menu-opener">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="15"
            height="10"
            enable-background="new 0 0 15 10"
            viewBox="0 0 15 10"
            x="0px"
            y="0px"
            xml:space="preserve"
            version="1.1"
        >
            <g>
            <rect
                clip-rule="evenodd"
                fill-rule="evenodd"
                x="0"
                y="0"
                width="15"
                height="2"
            />
            <rect
                clip-rule="evenodd"
                fill-rule="evenodd"
                x="0"
                y="4"
                width="15"
                height="2"
            />
            <rect
                clip-rule="evenodd"
                fill-rule="evenodd"
                x="0"
                y="8"
                width="15"
                height="2"
            />
            </g>
        </svg>
        </span>',
        'walker'                => new Child_Wrap()) ); 
    ?>
  <div class="mobile-show">
    <div class="nav-login">
      <a href="#" class="btn btn-register"
        >Your Account<span class="ripple-wrapper"></span
      ></a>
    </div>
    <div class="nav-login help">
      <a href="#" class="btn btn-register"
        >Help<span class="ripple-wrapper"></span
      ></a>
    </div>
  </div>
</nav>

How can I add the class <ul class="sub-menu"> to my sub-items and prevent the code inside of 'after' in my wp_nav_menu() from repeating itself with all other sub-items (this is what's happening now) and make everything work as intended?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.