Secondary Menu sub-menu not showing

  • I have a Secondary Menu on a site I am developing. This menu has some sub-menu items that are not functioning the same as on the Primary Menu, that is to say, they are visible all the time, not hidden until clicked. I am unable to click on the parent link to show/hide sub-menu.

    This is the code that initialises the primary menu:

    <?php
            wp_nav_menu(
                array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                )
            );
            ?>

    This is the code for the secondary menu:

     <?php
                wp_nav_menu(
                    array(
                        'theme_location' => 'menu-2',
                        'menu_id'        => 'secondary-menu',
                    )
                );
                ?>

    Looking at the source code the Primary Menu iinitialises as:

    <ul id="primary-menu" class="menu nav-menu">flex

    The secondary menu initialises as:

    <ul id="secondary-menu" class="menu">

    I’m assuming the missing “nav-menu” class is the reason the Secondary Menu isn’t functioning in the same way as the Primary Menu (ie submenu hidden until parent link is clicked)?

    Can anyone advise what I have missed?

    • This topic was modified 1 year, 4 months ago by mikehenden.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter mikehenden

    (@mikehenden)

    I also have the following code in functions.php:

    	// This theme uses wp_nav_menu() in two locations.
	register_nav_menus(
		array(
			'menu-1' => esc_html__( 'Primary', 'website' ),
            'menu-2' => esc_html__( 'Secondary', 'website' )
		)
    Moderator bcworkz

    (@bcworkz)

    If you want the same classes as primary, use the “menu_class” arg in your wp_nav_menu() call.
    'menu_class' => 'menu nav-menu',

    Without a link to your site, I cannot say if adding “nav-menu” class to the menu HTML will solve your issue or not. Ultimately, you need appropriate CSS applied through what ever selectors are appropriate. Initially, a submenu is hidden. When its parent element is hovered over, the submenu’s visibility is changed.

    Use your browser’s element inspector tool to see how the CSS is applied to the primary menu elements. Then use the same concepts for your secondary.

    Thread Starter mikehenden

    (@mikehenden)

    Hi @bcworkz , thanks for your feedback. I can’t see how to add the ‘nav-menu’ class to the secondary menu (other than applying this class to the parent div. Unfortunately this didn’t achieve anything).

    What I would like is for Primary and Secondary navigation to play by the same set of rules. Unfortunately my Parent item doesn’t seem to know that it’s a button to show/hide submenu…

    ??

    Moderator bcworkz

    (@bcworkz)

    You should try to determine if the drop down behavior is script driven or CSS driven. If it’s script driven, altering container classes will not help. The script will either need to be modified or replicated so it applies to secondary as well.

    Another thing you could do is ask in your theme’s dedicated support channel for what’s required to get drop down behavior in secondary menus.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Secondary Menu sub-menu not showing’ is closed to new replies.