I'm converting an html site to wordpress and am having an issue with the menus. I have created the separate menu locations with the php code in the templates
<div id="NavItems">
<?php
$args = array(
'theme-location' => 'primary',
);
wp_nav_menu($args);
?>
</div>
<div class="footerNav">
<h3>Services</h3>
<?php
$args = array(
'theme-location' => 'footerServ',
);
wp_nav_menu($args);
?>
</div>
And the functions.php has this code
function register_my_menus() {
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footerServ' => __('Footer Services'),
'footerWork' => __('Footer Our Work'),
'footerLegal' => __('Footer Legal'),
'footerInc' => __('Footer Inc'),
));
}
add_action( 'init', 'register_my_menus' );
main menu config looks like this - Main Menu Wordpress Config
footer menu config looks like this - FooterMenu Wordpress Config
The resulting html looks like this for the main menu
<nav role="navigation" id="MainNav" class="group">
...
<div id="NavItems">
<div class="menu-footer-services-container">
<ul id="menu-footer-services" class="menu">
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95">
<a href="http://localhost/wordpress/services/mold-manufacturing/">Mold Manufacturing</a>
</li>
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96">
<a href="http://localhost/wordpress/services/injection-molding/">Injection Molding</a>
</li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94">
<a href="http://localhost/wordpress/services/thermoforming/">Thermoforming</a>
</li>
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93">
<a href="http://localhost/wordpress/services/plastic-fabrication/">Plastic Fabrication</a>
</li>
<li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91">
<a href="http://localhost/wordpress/services/custom-design/">Custom Design</a>
</li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92">
<a href="http://localhost/wordpress/services/assembly/">Assembly</a>
</li>
</ul>
</div>
</div>
...
The footer menu has the same class and ul.
I have done everything I can think of, and am almost certain the configuration is correct inside of wordpress, and haven't found any issues with my code.
In summary, My main menu is being overwritten by the footer menu, despite having different locations set, and names. The wordpress dashboard has the correct configuration for what I want. However the result shows my main menu having the footer menu class and instead of 'home'... it shows 'mold manufacuring'....
I was following this video (in comments) to set up my navigation, and followed his actions exactly.
It's almost as if wordpress is only allowing me to show 1 menu, despite allowing me to configure several.
Thank you in advance for any help.