Adding dropdown menu on custom theme wordpress

Question

I am trying to create a dropdown menu for a theme I am developing but the sub menu items are showing up in the alongside the parent menu items.

I have it saved as a submenu item

Here is what it looks like our programs should be under about us now it's just all jumbled

This is what I have for my navigation in functions.php

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}

add_action( 'init', 'register_my_menus' );

   $defaults = array(
    'default-image'          => '',
    'width'                  => 0,
    'height'                 => 0,
    'flex-height'            => false,
    'flex-width'             => false,
    'uploads'                => false,
    'random-default'         => false,
    'header-text'            => true,
    'default-text-color'     => '',
    'wp-head-callback'       => '',
    'admin-head-callback'    => '',
    'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $defaults );

and in my header.php

<div id="menu">
    <ul>
        <li id="access"><?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?></li>
    </ul>
</div>

I can't seem to find anything online. Any help would be appreciated!

Answer 1

You have to create class for menu and you have to apply those class to menu. You can use walker to add several conditional classes to your menu.

For more details you can refer to

https://developer.wordpress.org/reference/functions/wp_nav_menu/

wp_nav_menu( array( 
  'sort_column' => 'menu_order', 
  'container_class' => 'menu-header',
  'menu_class' => 'your_class' //you can add your class here,
  'container' => 'div',
  'menu' => 'main-nav',
  'theme_location'    => 'my-header-menu', // Select the menu name registered in functions.php
  'walker'            => "", // Instance of a custom walker class to add conditional classes into your nav menu
));

Answer 2

You need to add different classes to menu. and apply appropriate CSS for position( left: (n)px; top: (n)px; ) to those classes.

wp_nav_menu( array( 
  'sort_column' => 'menu_order', 
  'container_class' => 'menu-header',
  'menu_class' => 'custom_menu' //add class,
  'container' => 'div',
  'menu' => 'main-nav',
));

Hope it will help you :)

Answer 3

Add this code in functions.php file

add_action('wp_enqueue_scripts', 'buena_child_scripts');

function register_flatlearn_menu(){
  //register menu
  register_nav_menus(
    array(
      'primary-menu' => __('Primary Menu'),
      'footer-menu' => __('Footer Menu')
      )
    );
  }
  //attach with action hook
  add_action("init","register_flatlearn_menu");

after this code, you add the following code in header.php file as given below:

<nav>
  <?php
     wp_nav_menu(array(
       'sort_column' => 'menu_order',
       'menu-id' =>'primary-menu',
       'depth' => 0,
       'container' =>'false' ,
       'menu_class' => 'nav topnav',
     ));
  ?>
</nav>