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

1 Views

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 :

Read More

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

Post Views: 1

Related posts

Leave a Reply

3 comments

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

  3. 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',