The active menu in Bootstrap is malfunctioning

After downloading an HTML template from a website, I encountered an issue where the Bootstrap active menu was not working properly after using the PHP include() function to add the same header and footer to every page. I also tried using JavaScript and jQuery, but the problem persisted.

I am now seeking advice on how to fix the active menu feature. Any help would be greatly appreciated.

<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

Consider implementing a PHP function to retrieve the current URL and incorporate it into your navigation PHP file. Additionally, exploring the use of a framework could streamline the process.

<?php 

function addActiveClass($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 addActiveClass("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 addActiveClass("activity")?>>
                        <a href="activity.php">અમારા પ્રવૃત્તિઓ</a>
                    </li>

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

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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

DOMPDF - Comparing background URL rendering between Linux and Windows

When converting HTML to PDF, my image doesn't show on a Linux server. On localhost, the image displays properly. Here is my CSS code: background: red url("<?php echo __DIR__ ?/my_img.png"); However, on the Linux server, the image does not appea ...

Converting JSON data to a string using an AJAX request

I encountered an issue with an ajax call that returns JSON data. The JSON file is constructed as follows: $hotel_array2 = array(); ..... $hotel_array2['name'] = str_replace('\'', '', $hotel->HotelDetails->Name ...

Enhance your iPhone web app with high-resolution retina images!

As I develop a mobile web application accessible on any smartphone, I have the index.html file available for review: The app includes 2 jQuery functions. One detects if the user is using an iPhone and displays a bubble with instructions to add it to the h ...

Attempting to change the primary color in Bootstrap is ineffective following a button click

I have been attempting to customize the primary color of Bootstrap 5 using SCSS. Everything works perfectly until I click a button that opens an external link. Below is the content of my SCSS file: $primary: #ae217aff; @import "../node_modules/boots ...

How to use Vue v-bind to fetch an array object from a different array iteration

I am currently working on a project where I have developed a table component that is utilized across multiple pages with different configurations. Each table has its own configuration stored in a separate file, containing keys, titles, and size classes for ...

"Using Jquery to fadeIn specific child elements based on their

Recently, I've been facing an issue with incorporating JavaScript and HTML. My goal is to display an error message if the value of a text input is incorrect. $('input[name="login"]').blur(function() { $('.error:nth-child(2)&apo ...

The body background position center does not function properly in Internet Explorer

I'm currently working on a website and facing some issues with the background-position property in CSS. Here is the code snippet that's giving me trouble: body { background-color: Black; background-image: url(images/background_ui.png); backg ...

Modify the parent div's style if there are more than two children present (CSS exclusive)

Is there a way to use the same class, like .outer, for both divs but with different styling for the parent element when there are more than two children? Kindly refer to the example provided below: .outer1{ border: solid 6px #f00; } .outer2{ b ...

Tips for aligning Submenu in the middle using CSS

Is there a way to center align the Submenu container? I attempted using margin-left but it didn't work. #moz_page .moz_menu_items ul { position: absolute; top: -9999px; display: block; width: 220px; background-color: #F6D9E8; background: rgba(246,2 ...

Placing elements in Chrome compared to IE

I'm currently attempting to position elements in two rows using mathematical calculations. One of the elements, thumb_container, is a div that is absolutely positioned. Within this container, I am dynamically loading and appending image thumbnails usi ...

`Starting with Bootstrap 4`

Here's the bare bones setup I have managed to put together: <html> <head> <link rel="shortcut icon" href="microsoft.png" type="image/png"> <link rel="stylesheet" href="bootstrap-4.0.0-alpha.2/dist/css/bootstrap.css"> < ...

Is there a way to see the default reactions in a browser when keyboard events such as 'tab' keydown occur?

Whenever I press the 'tab' key, the browser switches focus to a different element. I would like to be able to customize the order of focused elements or skip over certain elements when tabbing through a page. While I am aware that I can use preve ...

Is it possible to make a model draggable but disable it specifically on input fields?

I'm exploring the implementation of a draggable feature by using both a JavaScript directive and the simple draggable="true" attribute. (Testing each method separately). Here's my basic code structure: <div draggable="true& ...

Generate Bootstrap 5 Navbar <li> and <ul dropdown item> dynamically using JavaScript

Requesting assistance I have stored text in the constant.js file as shown below. export const navLinks = [ { id: "manage", title: "Manage", }, { id: "transactions", title: "Tran ...

Error message "Unexpected token :" was encountered when using JsonP with AngularJS on the website routingnumbers.info

I have spent a considerable amount of time researching this issue and am hopeful that someone can assist in diagnosing the problem. I have already reviewed the following SO questions: (Due to reputation limitations, I could only include the paths) quest ...

Tips for creating Django URL in template with jQuery Ajax

When coding in Django, it's essential to adhere to the DRY principle and hard-code URLs in a centralized location like the urls.py file. However, when passing a URL from a Django template to a jQuery Ajax function, many developers struggle to find the ...

A guide to aligning text on the right side of an image with HTML and CSS

Looking for assistance to align text on the right side of an image at the same level. Below is the code I have: <a class="following-row" href="index-2.html?pid=2306"> <img alt="Girls logo" src="photos/users/35257/resized/9fd79 ...

Strategies for Dynamically Updating Django ChoiceField Options Based on Another ChoiceField's Selection

I have a Django form that includes fields for the user's country and state or region. The form presents a list of countries in a ChoiceField named 'country' using a Select widget, which is pre-populated from a specified list. If the user sel ...

Customizing Magento Options: Exploring ways to tweak the design of product options

I'm attempting to stack the options vertically rather than side by side. I'm struggling to figure out which code I need to adjust, my brain seems to be failing me on this one. Should I make changes to the product-options-wrapper? ...

Sharing the checkbox's checked status with an AJAX script

I am faced with a challenge involving a table that contains checkboxes in the first column. When a checkbox is checked, it triggers an AJAX script that updates a PHP session variable with the selected values. The functionality is currently operational, but ...