CODEWITHSUNDEEP
csswordpresswordpress-themingwp-nav-walkerwp-nav-menu-item
JunM
JunM

Reputation: 7150

wp_nav_menu - add class on UL

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:

enter image description here

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

Upvotes: 29

Views: 100255

Answers (7)

dfg
dfg

Reputation: 1

    /*===========================================
        =           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');
        });
    };

Upvotes: 0

Tahmidur R. Shovon
Tahmidur R. Shovon

Reputation: 21

You can try this. It works for me

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

Upvotes: 2

Albertino Carvalho
Albertino Carvalho

Reputation: 190

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.

Upvotes: 8

Santiago Alejandro
Santiago Alejandro

Reputation: 31

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

Upvotes: 3

Umair Razzaq
Umair Razzaq

Reputation: 313

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

Upvotes: 2

Brane
Brane

Reputation: 3339

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

Upvotes: 26

andreivictor
andreivictor

Reputation: 8451

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

Upvotes: 30

Related Questions