First I try two of the tutorial below, it doesn’t work for me. I also check the WordPress documentation.

I try to convert my HTML design to WordPress theme. find out WordPress use ul or li element for the menu, but in design, I use < a> element for the navbar, I have been trying this for 2 days. they do not convert correctly. Thinking about changing them to ul or li, but my CSS stylesheet will need big updated it. Does anyone have any solution? please?

my navbar code:

<div class="div-block-18">
<div data-collapse="medium" data-animation="default" data-duration="400" class="navbar w-nav">
  <div class="container w-container">
    <a href="index.html" class="w-nav-brand">
      <div>
	  <img src="<?php bloginfo(stylesheet_directory)?>/assets/images/your-logo300.png" class="image-5">
	  </div>
    </a>
    <nav role="navigation" class="nav-menu w-nav-menu">
     <a href="index.html" class="nav-link w-nav-link"><strong class="bold-text">HOME</strong></a>
      <a href="about.html" class="nav-link-2 w-nav-link"><strong class="bold-text-2">ABOUT</strong></a>
      <a href="blog.html" class="nav-link-3 w-nav-link"><strong class="bold-text-3">BLOG</strong></a>
      <a href="shop.html" class="nav-link-3 w-nav-link"><strong class="bold-text-4">SHOP</strong></a>
      <a href="resource.html" class="nav-link-3 w-nav-link"><strong class="bold-text-5">RESOURCE</strong></a>
      <a href="contact.html" class="nav-link-4 w-nav-link"><strong class="bold-text-6">CONTACT</strong></a>
     </nav>
     <div class="menu-button w-nav-button">
      <div class="w-icon-nav-menu"></div>
    </div>
  </div>
</div>

Here’s the first one I try also:

<?php

	 wp_nav_menu( array(
		 'theme_location' => 'primary',
		 'container' => 'nav',
		 'container_class' => 'div-block-18',
		 'menu_class' => 'nav-link w-nav-link'
	   ));

	?>

Here’s the second one I try:

<?php
$defaults = array(
    'theme_location'  => 'top_menu',
    'menu'            => '',
    'container'       => '',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'w-nav-menu main-nav',
    'menu_id'         => '',
    'echo'            => false,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<nav id="%1$s" class="%2$s">%3$s</nav>',
    'depth'           => 0,
    'walker'          => ''
);

$find = array('><a', '<li');
$replace = array('', '<a');

echo str_replace($find, $replace, wp_nav_menu( $defaults ));
?>

Thank you guys so much!

What is the problem you really face? Is it that list tags have bullet styles and appear in a linear format? These are CSS problems that can be resolved without touching the HTML of the page nor negatively affecting your users.

The wp_nav_menu() function offers several filters that allow you to add anchor tag classes. Look through the source code and decide which filters would best work for you. ‘wp_nav_menu_items’ filter might be a good choice. If you are not familiar with using filter hooks, it’s something you should learn about. A lot of customizing WP involves filter hooks and the similar action hooks. A good hooks overview is available in the Plugin Handbook.

If you need more control over the generated HTML than what can be easily accomplished with filter hooks, you can utilize a custom walker class object. This would give you total control over the final HTML. However, custom walker classes are an advanced coding technique and are not usable by just anyone. But if you have any kind of coding aptitude, it’s something you can figure out eventually.

With a custom walker, you could even generate HTML that does not include ul and li tags. But for the reasons Andrew has pointed out, doing so would not be recommended. You are better off adjusting your CSS.

While we’re on the subject of good practice, it’s less than ideal to have strong tags in your menu HTML. That sort of styling should be part of your CSS. Your site will be easier to maintain if font weights are managed with CSS and not HTML. It’s not a big deal, but you shouldn’t spend time adding strong tags to the wp_nav_menu() content. Use CSS for that. If need be, you could add “bold-text” classes to the anchor tags, but it shouldn’t be necessary. Just style .w-nav-link as being font weight bold.