0

i try to create menu loop with structure like below, but i cant, default function wp_nav_menu doesn't allow to do that, i don't understand hot to do it. I need structure like in example with data-remodal-target count and data-remodaul-id. How can i do it?

            <nav class="main-menu">
              <ul class="row between">
                <li class="main-menu__item">
                  <a class="main-menu__link" href="#" data-remodal-target="modal00">News</a>
                  <div class="modal main-menu__modal-wrapper" data-remodal-id="modal00">
                    <button class="button_close" data-remodal-action="close"></button>
                    <div class="modal-wrapper">
                      <div class="modal__content">
                        <ul class="main-menu__sub-menu animated fadeIn">
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page1.html">page 1</a>
                          </li>
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page2.html">page 2</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="main-menu__item">
                  <a class="main-menu__link" href="#" data-remodal-target="modal01">Media</a>
                  <div class="modal main-menu__modal-wrapper" data-remodal-id="modal01">
                    <button class="button_close" data-remodal-action="close"></button>
                    <div class="modal-wrapper">
                      <div class="modal__content">
                        <ul class="main-menu__sub-menu animated fadeIn">
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page1.html">page 1</a>
                          </li>
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page2.html">page 2</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="main-menu__item">
                  <a class="main-menu__link" href="#" data-remodal-target="modal02">Serv</a>
                  <div class="modal main-menu__modal-wrapper" data-remodal-id="modal02">
                    <button class="button_close" data-remodal-action="close"></button>
                    <div class="modal-wrapper">
                      <div class="modal__content">
                        <ul class="main-menu__sub-menu animated fadeIn">
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page1.html">page 1</a>
                          </li>
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page2.html">page 2</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </nav>
1

You have to extend the Walker_Nav_Menu class with your own class to modify WP Nan Menus.

One of the best example is wp_bootstrap_navwalker. You can also extend walker class to built custom navigation structures.

Your Answer

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

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