Add classes to Wordpress Menu ul element

Question

My site uses the WordPress Appearance > Menus to create the <ul> and sub elements for my navigation links.

I am using a function in functions.php to add the class navbar-nav to the <ul> element like this:

function add_link_atts($atts) {
    $atts['class'] = "nav-link";
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

But how can I add 2 extra classes? namely nav-fill and w-100

I tried this but don't think its working:

function add_link_atts($atts) {
    $atts['class'] = "nav-link nav-fill w-100";
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

How can I add these two extra classes?

Tasos Fel · Accepted Answer · 2018-03-10 13:00:12Z

2

To add CSS classes to a WordPress menu, first go to Appearance > Menus in your WordPress theme.

Next, find the Screen Options tab at the top right of the screen. Click to open the panel, and check the box labelled CSS Classes.

If you want to add Class to your Menu.

function main_menu()
{   
    wp_nav_menu( array( 'theme_location' => 'main-menu', 'container'=> false, 'menu_class'=>'nav-link nav-fill w-100'
    ) );

}

if you want to add class to your menu a tag element:

function add_class_to_all_menu_anchors( $atts ) {
    $atts['class'] = 'nav-link nav-fill w-100';

    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_all_menu_anchors', 10 );

answered Mar 10, 2018 at 13:00

Tasos Fel

3312 silver badges6 bronze badges

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

1 Comment

Tasos Fel Over a year ago

so find where you create this menu and add 'menu_class'=>'nav-fill w-100' , read this also : developer.wordpress.org/reference/functions/wp_nav_menu

Collectives™ on Stack Overflow

Add classes to Wordpress Menu ul element

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related