target nav class in wp_nav_menu

Question

This is my first custom wordpress theme and i seem not to get this wp_nav_menu() right. Here is my wp_nav_menu() code.

<?php 
wp_nav_menu( array(
    'theme_location' => 'primary',
    'container' => false,
    'menu_class' => 'js--main-nav'

) );

?>

When i click on the hamburger on mobile devices it doesn't show links. But the links are shown on desktop view. I inspect the menu to see what is going on. I discovered some classes where added to the .

<nav class="sticky">
    <div class="row">
        <img src="" alt="" class="">
        <img src="" alt="" class="">


        <ul id="menu-main-menu" class="js--main-nav" style="display: block;"><li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-8"><a href="">Home</a></li>
            <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="">Resources</a></li>
            <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="">Blog</a></li>
        </ul>                    
        <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>

    </div>
</nav>

This is how my raw html code looks like before converting to wordpress theme.

<nav>
    <div class="row">
        <img src="" alt="" class="">
        <img src="" alt="" class="">
            <ul class="main-nav js--main-nav">
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Make Payment</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
            <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
    </div>
</nav>

what is the proper way to write my wp_nav_menu() in order to target the with the required class "main-nav" and "js-main-nav" and get rid of these "menu-main-menu" that was added.

Answer 1

If you take a look at the wp_nav_menu()'s documentation, you notice that you have control over the most of wrappers' class and ID. Here's what you can pass to the wp_nav_menu() function:

'menu_class'

(string) CSS class to use for the ul element which forms the menu. Default 'menu'.

'menu_id'

(string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.

'container'

(string) Whether to wrap the ul, and what to wrap it with. Default 'div'.

'container_class'

(string) Class that is applied to the container. Default 'menu-{menu slug}-container'.

'container_id'

(string) The ID that is applied to the container.

So, in your case you can pass the main-nav js--main-nav to the menu_class and false or an empty string to the menu_id. Although I have to mention, having an ID for the ul will not hurt. Removing it won't do anything unless there is a conflict because of this.