Return to Question

Here The Solution With The Help Of Walker_Nav_Menu Function

Walker_Nav_Menu Function

Function.php

class Desktop_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    if (array_search('menu-item-has-children', $item->classes)) {
        $output .= sprintf("\n<li class='menu-item has-dropdown dropdown %s'><a href='%s' class=\"nav-top-link\" >%s <i class='icon-angle-down' ></i></a>
        \n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url,
         $item->title);
    } else {
        $output .= sprintf("\n<li %s><a href='%s'>%s</a>\n", ( array_search('current-menu-item', $item->classes) ) ? '' : '', $item->url, $item->title
        );
    }
}

function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"nav-dropdown nav-dropdown-default\" role=\"menu\">\n";
}
}

Header.php Code

<?php 
   $defaults = array(
         'theme_location'  => 'header-menu',
         'container'       => 'ul',
         'menu_class'      => 'nav header-nav header-bottom-nav nav-center  nav-uppercase',
         'walker'          => new Desktop_Walker_Nav_Menu()           
   );
            
  wp_nav_menu( $defaults );
  ?>

how do you create this customize menu using wp_nav_menu function?

header.php file

register_nav_menus( array( 
    'header-menu' => 'Header Menu', 
    'footer-menu' => 'Footer Menu' 
  ) );

function.php file

  <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => '', ) ); ?>

How do i assign class to <ul> and <li>

Html Example

<ul class="nav header-nav header-bottom-nav nav-center  nav-uppercase">
     <li class=""><a href="index.php" class="nav-top-link">Home</a></li>
     <li class="has-dropdown"><a href="testing.php" 
     class="nav-top-link">Testing<i class="icon-angle-down" ></i></a>
        <ul class='nav-dropdown nav-dropdown-default'>
            <li><a href="hello.php">Hello</a></li>
        </ul>
     </li>
 </ul>

Result Should Be Like This In Wordpress Function

how do you create this customize menu using wp_nav_menu function?

function.php file

register_nav_menus( array( 
    'header-menu' => 'Header Menu', 
    'footer-menu' => 'Footer Menu' 
  ) );

header.php file

  <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => '', ) ); ?>

How do i assign class to <ul> and <li>

Html Example

<ul class="nav header-nav header-bottom-nav nav-center  nav-uppercase">
     <li class=""><a href="index.php" class="nav-top-link">Home</a></li>
     <li class="has-dropdown"><a href="testing.php" 
     class="nav-top-link">Testing<i class="icon-angle-down" ></i></a>
        <ul class='nav-dropdown nav-dropdown-default'>
            <li><a href="hello.php">Hello</a></li>
        </ul>
     </li>
 </ul>

Result Should Be Like This In Wordpress Function

how do you create this customize menu using wp_nav_menu function?  header.php file

register_nav_menus( array( 
    'header-menu' => 'Header Menu', 
    'footer-menu' => 'Footer Menu' 
  ) );

function.php file

  <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => '', ) ); ?>

How do i assign class to <ul> and <li>

Html Example

<ul class="nav header-nav header-bottom-nav nav-center  nav-uppercase">
     <li class=""><a href="index.php" class="nav-top-link">Home</a></li>
     <li class="has-dropdown"><a href="testing.php" 
     class="nav-top-link">Testing<i class="icon-angle-down" ></i></a>
        <ul class='nav-dropdown nav-dropdown-default'>
            <li><a href="hello.php">Hello</a></li>
        </ul>
     </li>
 </ul>

Result Should Be Like This In Wordpress Function

how do you create this customize menu using wp_nav_menu function? 

header.php file

register_nav_menus( array( 
    'header-menu' => 'Header Menu', 
    'footer-menu' => 'Footer Menu' 
  ) );

function.php file

  <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => '', ) ); ?>

How do i assign class to <ul> and <li>

Html Example

<ul class="nav header-nav header-bottom-nav nav-center  nav-uppercase">
     <li class=""><a href="index.php" class="nav-top-link">Home</a></li>
     <li class="has-dropdown"><a href="testing.php" 
     class="nav-top-link">Testing<i class="icon-angle-down" ></i></a>
        <ul class='nav-dropdown nav-dropdown-default'>
            <li><a href="hello.php">Hello</a></li>
        </ul>
     </li>
 </ul>

Result Should Be Like This In Wordpress Function