Removing the active class from a Bootstrap menu can be achieved by targeting the specific

I have successfully implemented a Bootstrap Menu by placing it in a separate header.html file and using the php include function to call that file on every page of my website. However, I am now trying to figure out how to dynamically change the active class based on the page that has been loaded.

<header class="header_area">
    <div class="main_menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="./index.php">
                <img src="./Images/Test Logo Image.png" width="35" height="35" alt="" loading="lazy">
              </a>
            <a class="navbar-brand Company_Text hidden-lg" href="./index.php">Dolphin Rubber Udyog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <div class="mr-auto"></div>
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="./index.php">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./about.php">About Us</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./products.php">Products</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./contact.php">Contact Us</a>
                </li>
                </ul>
            </div>
          </nav>
    </div>
</header>
htmlcss

Answer №1

Per your request in the comments seeking assistance with the implementation I recommended, I don't have access to all of your code but I believe I can still provide help.

For illustration purposes, let's consider your about.php and contact.php files.

This is a potential structure:

About.php

<?php
    $pageName = "about";
    //Code to include your menu (include menu.php;)
    //Rest of your page code

Contact.php

<?php
    $pageName = "contact";
    //Code to include your menu (include menu.php;)
    //Rest of your page code

(I'm utilizing shorthand for if-else statements to keep your code concise. Reference: https://davidwalsh.name/php-ternary-examples)

Menu.php

<header class="header_area">
<div class="main_menu">
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="./index.php">
            <img src="./Images/Test Logo Image.png" width="35" height="35" alt="" loading="lazy">
          </a>
        <a class="navbar-brand Company_Text hidden-lg" href="./index.php">Dolphin Rubber Udyog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <div class="mr-auto"></div>
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link <?php echo ($pageName == 'home') ? "active" : ""; ?>" href="./index.php">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link <?php echo ($pageName == 'about') ? "active" : ""; ?>" href="./about.php">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link <?php echo ($pageName == 'products') ? "active" : ""; ?>" href="./products.php">Products</a>
            </li>
            <li class="nav-item">
              <a class="nav-link <?php echo ($pageName == 'contact') ? "active" : ""; ?>" href="./contact.php">Contact Us</a>
            </li>
            </ul>
        </div>
      </nav>
</div>

I'm using this snippet of code to determine whether the about page should be highlighted as active:

<?php echo ($pageName == 'about') ? "active" : ""; ?>

To summarize my approach:

I've assigned a specific $pageName variable to each page to define its unique name. In menu.php, I retrieve this variable (possible due to the use of include(), which seamlessly incorporates PHP code) and based on its value, dynamically add the active class to the respective menu item.

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

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

javascriptjqueryhtmlcssjquery-ui-sortable

Efficient guide to unlock the secrets of JS height measurements

I've noticed that there are several different 'Height' related properties in JavaScript such as clientHeight, Window.height, scrollHeight, offsetHeight, and more. Although I have a general idea of what they do, I am seeking a formal and det ...

javascripthtmlcss

A minimalist dropdown menu using only HTML and CSS with an onclick function

I have been working on creating an onclick dropdown menu for mobile devices that should disappear when viewed on wider screens, but I've encountered an issue where the links in the menus are not clickable even though the @media query is set up correct ...

htmlcss

Unable to reset disabled styling for CSS select box

My Windows 8 app consists of two pages: Page1.html and Page2.html. Page1 references ui-light.css and page1.css, while Page2 references ui-light.css and page2.css. In the ui-light.css file, there is a rule defined for the disabled state of select boxes. I ...

cssselectwindows-8modern-ui

Retrieving information from the Header element (<H></H>) with the help of Selenium

I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...

javahtmlcssselenium

jsx eliminate parent based on dimensions

Imagine I have a DOM structured like this <div className="parent"> <div>child 1</div> <div>child 2</div> </div> If the view is on mobile, I would like the DOM to transform into <div>child 1</ ...

htmlreactjsjsx

All you need to know about the jQuery .css method

I've been struggling to get this script to function properly. Despite searching online, I haven't been able to find a satisfactory solution. $( document ).ready(function() { $("#container").click(function(){ var color = $(this).css("backgro ...

jquerycss

The slider's border-radius is not being maintained as it moves from left to right

We recently implemented a slider on our website, located at . While we added a border-radius to the slider, we noticed that when the images slide, the border-radius is slightly removed... I attempted to contain the parent element with overflow: hidden, bu ...

jqueryhtmlcssslider

Using a PHP for loop to manage a div control

Query: I am seeking a way to exert influence over the positioning of my dynamic divs. I want each div to be relative to the parent div. Challenge: The current code does not provide the flexibility to adjust the div positions based on the parent div. For i ...

phphtmlcss

Stop the creation of new div elements once the minimum height has been reached or when text is past

Here is the HTML code I am working with: <div id='parent' align='right' dir='rtl' style=padding:0px;margin:0px;font-weight:bold;width:300px;height:auto;min-height:300px; "'<div align='right' dir='rt ...

phphtmlasp.netcss

Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below: I'm looking to center the text "choose format" within the field and adjust the font size. return ( <FormControl sx={{ m: 1, minWidth: 150 }} size="sm ...

javascriptcssreactjsmaterial-ui

What is the best way to include the existing query string value in the hyperlinks on my page?

My main coding objective is to simultaneously search multiple websites. To accomplish this, I want to create a query string containing the search terms (primarily for analytics purposes) using a form. By utilizing JavaScript, I am aiming to include the s ...

javascriptjqueryhtmlarraysquery-string

Unusual marker appearing on every page utilizing ionic v1 and angularjs

For some unknown reason, a dot appears at the upper left side of each page in my webapp: https://i.stack.imgur.com/nN61t.png It seems to be an issue with the HTML code. When I run the snippet below, the dot is visible: <ion-view view-title="Send fe ...

javascripthtmlcssangularjsionic-framework

Using JavaScript to toggle the visibility of grids depending on the radio button choice and then triggering this action by clicking on the search button

As a newcomer to AngularJS development, I am encountering some challenges while attempting to implement the following scenario. Any suggestions or guidance would be greatly appreciated. I aim to showcase either one or two Angular UI grids based on the rad ...

javascripthtmlangularjsangular-ui-grid

Having trouble interacting with buttons while an overlay is open

When I try to use the overlay to move the text upwards and reveal buttons, I encounter an issue where I am unable to hover or click on those buttons. As soon as I try to interact with the buttons, the overlay and text come down, blocking my access. I have ...

htmlcssreactjsstylingcss-transforms

How can you handle all HTML tags with Regex in a single line of code?

I've developed a PHP script that converts all inline CSS in HTML tags to classes. Visit the following link for more information: https://gist.github.com/iBars/aa52c6119e53908c91ac553aeba229e0 However, it currently only processes tags that are the onl ...

phphtmlcssregex

Guide to Angular Directives: Assigning Attributes to innerHTML

Looking to add attributes to the inner HTML myTemplate.html <div class="custom-template"></div> HTML <template></template> directive app.directive('template', ['$compile', function($compile) { retur ...

javascripthtmlangularjsangular-directive

Clicking on an element deactivates its hover state

While experimenting on this JSFiddle, I noticed that after clicking one of the boxes, the hover state becomes inactive and doesn't show up again. These three boxes have their background set using css background-image. The click event is attached usin ...

jquerycssclickhover

Modifying paragraph content with JavaScript based on selected radio button values and troubleshooting the onclick event not triggering

I am working on implementing a language selection feature on my website where users can choose between English and Spanish. The idea is to have two radio buttons, one for each language, and a button. When the button is clicked, the text of the paragraphs s ...

javascripthtmlbuttononclick

Getting rid of padding in Material UI SwipeableViews in React

Seeking assistance with the React Tabs/SwipeableViews component. I used the MaterialUI Tabs as a reference and it mostly works fine. However, I am facing a minor issue with padding in the content section. Current outcome: Current Outcome The button ...

cssreactjsmaterial-ui