Bootstrap active menu does't working

Question

I have downloaded html template from the site. I use php include() function for header and footer to add same header footer in every page, after this the bootstrap active menu can't work. I also use javascript and Jquery but it can't.

Now what to do for active menu. please help me.

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.php">
                <img class="img-responsive" src="assets/images/logo.jpg" alt="">
                <div class="logo">
                    <span style="">માનસિક દિવ્યાંગ બાળકોની સંસ્થા</span>
                </div>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a href="index.php"><i class="fa fa-home" aria-hidden="true" style="font-size: 25px; margin-top: -5px;"></i></a>
                </li>
                <li>
                    <a href="activity.php">અમારા પ્રવૃત્તિઓ</a>
                </li>
                <li>
                    <a href="gallery.php">ગેલેરી</a>
                </li>
                <li>
                    <a href="management.php">સંચાલન</a>
                </li>
                <li>
                    <a href="about.php">અમારા વિશે</a>
                </li>
                <li>
                    <a href="contact.php">સંપર્ક</a>
                </li>
                <li>
                    <div class="donate-button text-center">
                        <a class="btn btn-donate" href="contact.php">દાન કરો</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>
</header>

Answer 1

Try adding a php function to get the current URL then using it in the nav php file. You may also want to look into using a framework to help things along.

<?php 

function activeClass($requestUri)
{
    $currentPage = basename($_SERVER['REQUEST_URI'], ".php");

    if ($currentPage == $requestUri || $currentPage == '')
        echo 'class="active"';
}

?>

<nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="index.php">
                    <img class="img-responsive" src="assets/images/logo.jpg" alt="">

                    <div class="logo">
                        <span style="">માનસિક દિવ્યાંગ બાળકોની સંસ્થા</span>
                    </div>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li <?php activeClass("index")?>>
                        <a href="index.php"><i class="fa fa-home" aria-hidden="true" style="font-size: 25px; margin-top: -5px;"></i></a>
                    </li>

                    <li <?php activeClass("activity")?>>
                        <a href="activity.php">અમારા પ્રવૃત્તિઓ</a>
                    </li>

                    <li <?php activeClass("gallery")?>>
                        <a href="gallery.php">ગેલેરી</a>
                    </li>

                    <li <?php activeClass("management")?>>
                        <a href="management.php">સંચાલન</a>
                    </li>

                    <li <?php activeClass("about")?>>
                        <a href="about.php">અમારા વિશે</a>
                    </li>

                    <li <?php activeClass("contact")?>>
                        <a href="contact.php">સંપર્ક</a>
                    </li>
                    <li <?php activeClass("contact")?>>
                        <div class="donate-button text-center">
                            <a class="btn btn-donate" href="contact.php">દાન કરો</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>