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!

Ravi Hirani · Accepted Answer · 2016-03-03 10:43:56Z

1

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 :)

answered Mar 3, 2016 at 10:43

Ravi Hirani

6,5341 gold badge31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bharat Jain · Accepted Answer · 2019-08-22 08:27:13Z

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
));

edited Aug 22, 2019 at 8:27

user10678889

answered Mar 3, 2016 at 10:54

Bharat Jain

5103 silver badges16 bronze badges

Comments

eavom · Accepted Answer · 2019-06-15 07:48:38Z

0

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>

edited Jun 15, 2019 at 7:48

eavom

1,1051 gold badge9 silver badges27 bronze badges

answered Jun 15, 2019 at 6:33

بلال اصغر

519 bronze badges

Collectives™ on Stack Overflow

Adding dropdown menu on custom theme wordpress

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related