how to change Wordpress menu markup/classes

Question

I’m building my first website on WordPress, and i wanted to ask is someone know how to change markup in Wordpress menu. Basically I want the markup of my WordPress navigation to match what I’ve done in my static templates.

<div class="topNav">
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Mes siūlome</a></li>
          <li class="dropdown">
            <a class="dropbtn">if Has subMenu</a>
            <div class="dropdown-content">
              <a href="#"> Sub1</a>
              <a href="#"> Sub2</a>
              <a href="#"> Sub3</a>
            </div>
          </li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

However, i getting something like this

<div class="menu-topnav-container">
   <ul id="menu-topnav" class="menu">
      <li id="menu-item-89" class="some random wordpress classes">
         <a href="#">about</a>
         <ul class="sub-menu">
            <li id="menu-item-90" class="some random wordpress classes"><a 
               href="http://test">example</a></li>
         </ul>
      </li>
      <li id="menu-item-92" class="some random wordpress classes"><a 
         href="http://2">example</a></li>
   </ul>
</div>

I know i need to use a custom walker class however i don't know how to apply it. :( can someone help me with this. I need this markup structure because i don't want to rewrite all css code.

Answer 1

Changing the CSS is the simplest way to apply your desired styles.

Another alternative, as Jack mentioned, is to create a custom walker. The Codex has a good overview.

The third option is a happy medium - you can customize the menu partially just with your wp_nav_menu() call. For example, this call

wp_nav_menu(array(
    'menu' => 'myMenu', // change this to call your desired menu
    'container_class' => 'topNav', // changes outer <div> class
    'items_wrap' => '<ul>%1$s</ul>' // strips id & class from <ul>
));

will give you this output:

<div class="topNav">
   <ul>
      <li id="menu-item-89" class="some random wordpress classes">
         <a href="#">about</a>
         <ul class="sub-menu">
            <li id="menu-item-90" class="some random wordpress classes"><a 
               href="http://test">example</a></li>
         </ul>
      </li>
      <li id="menu-item-92" class="some random wordpress classes"><a 
         href="http://2">example</a></li>
   </ul>
</div>

so there's less CSS to change, but you also don't have to build an entire Walker.