Adding class to menu_class to wp_nav_menu adds class to div instead of ul

Question

I am very new to wordpress themeing . I am trying to create a Twitter Bootstrap menu to my newly created theme as below in header.php page.

$defaults = array(
                'theme_location'  => 'header-menu',
                'menu'            => '',
                'container'       => '',
                'container_class' => '',
                'container_id'    => '',
                'menu_class'      => 'navbar-collapse collapse',
                'menu_id'         => 'navbar',
                'echo'            => true,
                'fallback_cb'     => 'wp_page_menu',
                'before'          => '',
                'after'           => '',
                'link_before'     => '',
                'link_after'      => '',
                'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                'depth'           => 0,
                'walker'          => ''
            );

        wp_nav_menu( $defaults );

With the above codes, I am expecting to add a class to navbar-collapse collapse to ul, but instead it produces HTML as below :

<div class="navbar-collapse collapse"><ul><li class="page_item page-item-11"> etc. How can I add class ul ?

Try to add classes to 'container_class' argument?

Danijel
– Danijel

2014-12-11 16:38:42 +00:00
Commented Dec 11, 2014 at 16:38 — Danijel
– Danijel, Commented Dec 11, 2014 at 16:38
@Danijel I tried adding class there, not showing anywher :(

Nitish
– Nitish

2014-12-11 17:27:53 +00:00
Commented Dec 11, 2014 at 17:27 — Nitish
– Nitish, Commented Dec 11, 2014 at 17:27

Jonathan Garrett · Accepted Answer · 2014-12-11 16:45:21Z

1

Check you've actually registered 'header-menu' via register_nav_menus. Removing theme_location => 'header-menu' will resolve the issue until you've registered your navigation ID correctly.

You should have this in your functions.php

register_nav_menus( array(
    'header-menu' => __( 'Header Menu', 'domain' ),
) );

answered Dec 11, 2014 at 16:45

Jonathan Garrett

1151 gold badge1 silver badge10 bronze badges

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

2 Comments

Nitish Over a year ago

I have added

function themeone_register_theme_menu() {     register_nav_menu( 'primary', 'Main Navigation Menu' ); } add_action( 'init', 'themeone_register_theme_menu' );

to functions.php . But still I am getting the same result !

Jonathan Garrett Over a year ago

'primary' is the theme_location attribute, you're calling 'header-menu' in your first example. See my solution for what you should have.

austinthedeveloper · Accepted Answer · 2014-12-11 16:34:41Z

0

Try checking out a function that's already been made like this one. It will create the correct syntax for the menu to work.

answered Dec 11, 2014 at 16:34

austinthedeveloper

2,63923 silver badges28 bronze badges

Comments

luknij · Accepted Answer · 2022-10-11 08:35:23Z

Due to the fact that no one solved your problem. I want to provide a solution for future users. The solution is in the container parameter of the wp_nav_menu function.

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

container string - Whether to wrap the ul, and what to wrap it with. Default 'div'.

To make parameter menu_class add it`s valuse to correct element, in your case it is ul element, you have to define container parameter as div, like below. Then parameter container_class will have default class 'menu-{menu slug}-container' because it`s not have any value given. container_id parameter also will be empty becouse there is no value given.

$defaults = array(
'theme_location'    => 'header-menu',
'container'     => 'div',
'container_class'   => '',
'container_id'      => '',
'menu_id'       => 'navbar',
'menu_class'        => 'navbar-collapse collapse',
);

        wp_nav_menu( $defaults );

Then menu_class and menu_id parameters will be added to the ul element and ul element will look this <ul id="navbar" class="navbar-collapse collapse">.

In case you don`t want to have div container delete container_class and container_id and leave container parameter with ul value like this:

'theme_location'    => 'header-menu',
'container'     => 'ul',                                    
'menu_id'       => 'navbar',
'menu_class'        => 'navbar-collapse collapse',

Collectives™ on Stack Overflow

Adding class to menu_class to wp_nav_menu adds class to div instead of ul

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related