I am learning wordpress by my own and this is the code of html template.

    <div class="collapse navbar-collapse" id="ftco-nav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="about.html" class="nav-link">Who we are</a></li>
            <li class="nav-item"><a href="causes.html" class="nav-link">Causes</a></li>
            <li class="nav-item"><a href="blog.html" class="nav-link">Stories</a></li>
            <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
        </ul>
    </div>

I want to convert it into wordpress. I converted it into wordpress by adding this code:-

<?php wp_nav_menu(array( 'menu' => 'primary', 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'ftco-nav', 'menu_class' => 'navbar-nav ml-auto', 'menu_id' => '', ));?>

but the problem is that how will I apply active class to it? please someone help me in this.

I am learning wordpress by my own and this is the code of html template.

    <div class="collapse navbar-collapse" id="ftco-nav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="about.html" class="nav-link">Who we are</a></li>
            <li class="nav-item"><a href="causes.html" class="nav-link">Causes</a></li>
            <li class="nav-item"><a href="blog.html" class="nav-link">Stories</a></li>
            <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
        </ul>
    </div>

I want to convert it into wordpress. I converted it into wordpress by adding this code:-

<?php wp_nav_menu(array( 'menu' => 'primary', 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'ftco-nav', 'menu_class' => 'navbar-nav ml-auto', 'menu_id' => '', ));?>

but the problem is that how will I apply active class to it? please someone help me in this.

• menus

Share Improve this question edited Jun 19, 2019 at 15:15 rudtek 6,38355 gold badges3030 silver badges5252 bronze badges asked Jun 19, 2019 at 14:11 ChandrimaChandrima 1

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Change your active class name in your css. WordPress adds the following active classes, depending on the context of the active state:

current-menu-item, current-menu-ancestor, current-menu-parent, and current-page-ancestor

May be this can helps you. add in functions.php

function add_active_class_to_menu_item($classes, $item) {
    if (in_array('current-menu-item', $classes) ){
        $classes[] = 'active ';
    }
    return $classes;
}
add_filter('nav_menu_css_class' , 'add_active_class_to_menu_item' , 10 , 2);