Wordpress menu issue - second menu overriding first

0
votes

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.

2
wordpressmenu
Video referenced in post - youtube.com/… – NiemBlackPine

2 Answers

1
votes
<div id="NavItems">
        <?php
            $args = array(
                'theme-location' => 'primary', 
            );
            wp_nav_menu($args);
        ?>
    </div>

Looks like the issues lies in the 'theme-location', seems to work if changed to 'theme_location' instead. However I will stay with my word-around because it would take more time to change it back for equal functionality. If anyone is interested, the workaround looks like this

<div id="NavItems">
            <ul>
                <?php  
                    $servMenu = wp_get_nav_menu_items('(wordpress number for your menu');
                    foreach ($servMenu as $item) {
                        $pages = get_pages();
                        $class = "";
                        foreach ($pages as $page) {
                            if ($page->post_title == $item->title) {
                                if (is_page($page->ID)) {
                                    $class = "current-menu-item";
                                }
                                break;
                            }
                        } ?>
                        <li class="<?php echo $class; ?>">
                            <a href="<?php echo $item->url; ?>">
                                <?php echo $item->title; ?>
                            </a>
                        </li>
                    <?php }
                ?>
            </ul>
        </div>
0
votes

Use menu_class in args like this it will take as ul class of menu.

<div id="NavItems">
        <?php
            $args = array(
                'theme-location' => 'primary',
                'menu_class' => 'primary-class',                    
            );
            wp_nav_menu($args);
        ?>
    </div>

<div class="footerNav">
            <h3>Services</h3>
            <?php
                $args = array(
                    'theme-location' => 'footerServ', 
                    'menu_class' => 'footer-class',
                );
                wp_nav_menu($args);
            ?>
        </div>