Two theme locations for two menus, but only one is showing up

Question

Here is what I try to achieve.

I have two menus. One is going to be a top navigation that lists all the pages, and the other one is going to list post categories.

in my header.php, I included the following code to generate menus for pages.

wp_nav_menu( array(
    'container' => 'ul',
    'menu_class' => 'mainNav',
    'theme-location' => 'Pages'
) );

and in the body of my index.php, I included the following code to generate menus for post categories.

wp_nav_menu( array(
    'theme-location' => 'Categories'
) );

inside my function.php file, the following code is included to register theme locations so I can customize and edit menus in Wordpress dashboard.

register_nav_menus(array(
    'Pages' => __('Pages Menu'),
    'Categories' => __('Categories Menu')
));

Then I created two menus and specified which menu should appear in which location.

However, the menu for pages (whose theme-location is 'Pages') is overridden by the menu for post categories (whose theme-location is 'Categories'). If I delete the menu for post categories, then the menu for pages show up.

I have been searching everywhere to see if anyone had a similar issue and resolved it and tried their solutions, but nothing has worked out so far for me.

Answer 1

theme-location should be theme_location Check documentation wp_nav_menu

corrected code

wp_nav_menu( array(
    'container' => 'ul',
    'menu_class' => 'mainNav',
    'theme_location' => 'Pages'
) );

wp_nav_menu( array(
    'theme_location' => 'Categories'
) );