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:

enter image description here

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

This is what I created in BEM notation https://stackoverflow.com/questions/59847953/wordpress-primary-navigation-ul-li-class-override — anyapps, Jan 21 '20 at 19:28
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. — Sambuxc, Nov 02 '21 at 11:16

andreivictor · Accepted Answer · 2014-03-30T11:32:26.217

30

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

edited Mar 30 '14 at 11:32

answered Mar 30 '14 at 10:10

andreivictor

7,628
3
48
75

4

It seems it doesn't work. My parameter in my post is the only parameter I specified. – JunM Mar 30 '14 at 10:15
Do you have menus defined in your wordpress dashboard? http://codex.wordpress.org/Appearance_Menus_SubPanel – andreivictor Mar 30 '14 at 10:33
Nope, just the default one. It seems it is still the same. – JunM Mar 30 '14 at 10:57
1

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. – andreivictor Mar 30 '14 at 11:12
Look on my way https://stackoverflow.com/questions/59847953/wordpress-primary-navigation-ul-li-class-override – anyapps Jan 21 '20 at 19:28

score 24 · Answer 2 · answered Nov 08 '16 at 18:40

24

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

answered Nov 08 '16 at 18:40

Brane

3,257
2
42
53

now everything makes sense. – Frizzant Apr 11 '23 at 11:27

score 7 · Answer 3 · edited Aug 19 '18 at 15:14

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

Santiago Alejandro · Answer 4 · 2018-07-20T02:59:08.677

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

Why does `name` work perfectly..yet its not documented anywhere in the codex? https://developer.wordpress.org/reference/functions/wp_nav_menu/ — klewis, Oct 25 '19 at 17:03

score 2 · Answer 5 · answered Dec 21 '16 at 12:18

2

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

answered Dec 21 '16 at 12:18

Umair Razzaq

313
5
17

score 1 · Answer 6 · answered Mar 13 '23 at 12:33

1

You can try this. It works for me

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

answered Mar 13 '23 at 12:33

Tahmidur R. Shovon

11
2

wp_nav_menu - add class on UL

6 Answers6

Linked