wp_nav_menu - add class on UL

Question

I am learning wordpress together with bootstrap and somehow I can't add class on UL tag.

In the screenshot, I want to add class nav nav-tabs on UL but it was added on parent div

$defaults = array(
  'menu_class'=> 'nav nav-tabs',        
);

wp_nav_menu( $defaults ); 

Inspected element:

Referrence:
http://codex.wordpress.org/Function_Reference/wp_nav_menu

Hakodate

Please post all the parameters you pass to wp_nav_menu. – Assist

This is what I created in BEM notation #59848453 – Burtburta

You will want to make sure that you've set up a custom menu selecting the menu location as top menu. The default Wordpress menu will not work and you will get the problem you're having. – Hagler

Answer 1

First of all, you need to create a custom navigation menu from Appearance -> Menus.

Then, use the wp_nav_menu with the following parameters:

<?php 
$args = array(
    'menu_class' => 'nav nav-tabs',        
    'menu' => '(your_menu_id)'
);
wp_nav_menu( $args ); 
?>

There's a lot you can read about Wordpress Menus. I suggest the following:
http://codex.wordpress.org/Navigation_Menus
http://www.paulund.co.uk/how-to-register-menus-in-wordpress

Assist

It seems it doesn't work. My parameter in my post is the only parameter I specified. – Hakodate

Do you have menus defined in your wordpress dashboard? codex.wordpress.org/Appearance_Menus_SubPanel – Assist

Nope, just the default one. It seems it is still the same. – Hakodate

Well, if you don't have menus, wp_nav_menu will display the output of wp_page_menu function, which displays all the pages. Try to create a menu and then use the menu parameter. – Assist

Look on my way #59848453 – Burtburta

Answer 2

You need to specify the container element, in our case 'ul' tag, and than specify the class that we will assign in 'menu_class'. Here is the sample code:

wp_nav_menu( array(
    'theme_location' => 'top-menu',
    'container' => 'ul',
    'menu_class'=> '[add-your-class-here]'
 ) );

Aphanite

now everything makes sense. – Cabbala

It seems that this changes the container div to an ul, and now you have an ul in an ul – Featureless

Answer 3

Update: this was caused by the fact that i didn't have a menu created in the menu page.

I want to add a class to the ul of wp_nav_menu. I tried this code:

<?php

$defaults = array(
    'menu_class'      => 'menu',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
);

wp_nav_menu( $defaults );

?>

According to wordpress codex changing the menu from 'menu_class' => 'menu', should change the class of the ul, but instead it changes the class of the div wrapping the ul.

Sample Page

Cessation

Answer 4

I had the same problem, so I changed the word "theme_location" to "name" and it works perfectly.

Example:

$defaults = array(
    '[INSTEAD OF PUTTING "theme_location" PUT "name"]'  => 'THE NAME OF YOUR "theme_location"',
    'menu_class' => 'YOUR CLASS', **[It will change the <UL> class]**
    );

    wp_nav_menu( $defaults );

So for your code:

wp_nav_menu( array(
    'name' => 'top-menu',
    'menu_class'=> 'YOUR CLASS'
 ) );

 wp_nav_menu( $defaults );

enter image description here

You can also put it into a container like a <DIV> or a <NAV> etc.

Example:

$defaults = array(
    'name'  => 'top-menu',
    'menu_id'         => 'YOUR ID',
    'container'       => 'nav',
    'container_class' => 'YOUR CONTAINER CLASS (<nav> in this case)',
    'menu_class'      => 'YOUR CLASS FOR <UL>',
    );

    wp_nav_menu( $defaults );

enter image description here

Psychosurgery

Why does name work perfectly..yet its not documented anywhere in the codex? developer.wordpress.org/reference/functions/wp_nav_menu – Einhorn

Answer 5

This is how you should do it, it works for me.

<?php wp_nav_menu( $menu_meta );

$menu_meta = array(
    'menu' => 'MENU-NAME-HERE',
    'items_wrap' => '<ul id="MENU-ID" class="MENU-CLASS">%3$s</ul>'
); ?>

Hansen

Answer 6

You can try this. It works for me

     wp_nav_menu( array(
    'theme_location' => 'main-menu',
    'container' => 'ul',
    'menu_class'=> '[your-class-here]'
 ) );

Catchment

Answer 7

    /*===========================================
        =           Mobile Menu               =
    =============================================*/
    //SubMenu Dropdown Toggle
    if ($('.tgmenu__wrap li.menu-item-has-children ul').length) {
        $('.tgmenu__wrap .navigation li.menu-item-has-children').append('<div class="dropdown-btn"><span class="plus-line"></span></div>');
    }

    //Mobile Nav Hide Show
    if ($('.tgmobile__menu').length) {

        var mobileMenuContent = $('.tgmenu__wrap .tgmenu__main-menu').html();
        $('.tgmobile__menu .tgmobile__menu-box .tgmobile__menu-outer').append(mobileMenuContent);

        //Dropdown Button
        $('.tgmobile__menu li.menu-item-has-children .dropdown-btn').on('click', function () {
            $(this).toggleClass('open');
            $(this).prev('ul').slideToggle(300);
        });
        //Menu Toggle Btn
        $('.mobile-nav-toggler').on('click', function () {
            $('body').addClass('mobile-menu-visible');
        });

        //Menu Toggle Btn
        $('.tgmobile__menu-backdrop, .tgmobile__menu .close-btn').on('click', function () {
            $('body').removeClass('mobile-menu-visible');
        });
    };

Hutson

Please don't just leave code as an answer—and especially here, where there are already some highly upvoted answers. Why should people consider your answer instead? What are you doing different? Under what circumstances might this be preferred? Help readers out by telling them what you're doing. – Henze