Switch the color (make it gray) of the selected tab in the navigation bar

<!-- Customizing the Navbar -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <a class="navbar-brand" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>StuFAP MS</strong></a>
  <ul class="navbar-nav ml-auto">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
  </ul>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <!-- Super Admin Navbar -->
      <?php if($_SESSION['Type']==1){ ?>
        <li class="nav-item active">
          <a class="nav-link highlighted" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>Home</strong></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo base_url('Controller_applicants'); ?>">
            <strong>Students</strong>
            <span id="badge_superadmin" class="badge badge-danger d-none"></span>
          </a>
        </li>
       // more list items here...
        
      <?php } ?>
      <!-- Admin Navbar -->
      <?php if($_SESSION['Type']==2){ ?>
        <li class="nav-item active">
          <a class="nav-link highlighted" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>Home</strong></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo base_url('Controller_applicants'); ?>">
            <strong>Students</strong>
            <span  id="badge_admin" class="badge badge-danger d-none"></span>
          </a>
        </li>
       // more list items here...
      <?php } ?>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown active">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <strong><?php echo $_SESSION['Username'] ?></strong>
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="<?php echo base_url('Controller_profile'); ?>"><strong>Profile</strong></a>
          <a class="dropdown-item" href="<?php echo base_url('Controller_dashboard/remove_credentials'); ?>"><strong>Logout</strong></a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<!-- Customizing the Navbar -->

Can anyone help me create a script that will change the color of the selected tab in the navigation bar to gray when it is the currently active module? I appreciate any assistance provided. Please note that these codes are subject to further optimization.

Answer №1

Would you mind clarifying your question a bit more for me? Are you referring to only one specific tab or module when you mention 'selected tab/module', or are you talking about the entire navigation bar?

In most cases, the simplest way to change how an element looks is by adding a class using PHP or Javascript, such as "is-active." By applying this class, you can define the CSS styles you want to implement, like so:

.is-active {
  color: grey;
  background-color: white;
  …
}

The issue I see with the code provided is that nearly all list items have an "active" class. This raises the question of what exactly "active" signifies in this scenario. Does it mean the item is currently selected, or just not inactive?

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

How to make sure a bootstrap row fills the rest of the page without exceeding the height of the screen

In my Angular application, I am using bootstrap to create the following structure (simplified version). <div class="container"> <div class="header> <div class="mat-card> <!-- Header content --> < ...

Can a div's style be modified without an id or class attribute using JavaScript or jQuery?

Is it possible to change the style of a div that doesn't have an id or class assigned to it? I need some assistance with this. Here is the div that needs styling: <div style="display:inline-block"> I would like the end result to look somethin ...

Exploring the possibilities of CSS grids within the Wordpress platform

After successfully building my website, I am now in the process of converting it into a customizable wordpress theme. One challenge I am facing is integrating a dynamic gallery using CSS grid. The goal is to upload photos, videos, and gifs in Wordpress and ...

Issue with Javascript functionality not persisting after page reload initiated with a href = '#'

I am facing an issue with a button on my webpage that is meant to redirect and reload the home page. However, after redirection to '#', my JavaScript seems to stop functioning correctly. Currently, my JavaScript code is enclosed within window.on ...

What could be causing the unexpected white gap within my div element even though I've adjusted its dimensions to be minimal?

<div style=" height:0; width: 0 ; border: 1px solid black ; "> This code snippet displays a div element with a specified height, width, and border color. However, there seems to be an issue with the rendering as some st ...

Is it considered improper to include non-input HTML elements within a form tag in Angular reactive forms?

When working with an angular reactive form to manage html inputs, is it acceptable to include non-input html elements within the form tags? NOTE: The previous example has been removed. A new one will be provided soon. ...

integrating the WordPress header into the WHMCS client portal

While working on a project, I am facing the challenge of aligning the WHMCS client area with my WordPress site. Progress has been made, but I have hit a roadblock. My goal is to integrate the header of my WordPress site into WHMCS. I initially attempted t ...

Locate numbers 2, 3, 6, 7, and 10, and continue in numerical order, within the

Having trouble with this one. Does anyone know how to display the items like this: 2, 3, 6, 7, 10 and so on... Is there a jQuery or CSS hack that can achieve this? I'm stuck trying to figure it out .container { display: flex; flex-flow: row wra ...

Issue with Firefox translateZ causing only half of the content to be visible on initial load in Pure CSS Parallax configurations

Recently, I've been experimenting with creating a parallax website and have been following the helpful steps outlined by Keith Clark. However, I've run into an issue that seems to be specific to Firefox. Upon loading the site, I noticed that the ...

PHP Email Form Data Submission

I've been struggling to get a form set up that will send the information to the admin upon submission, but so far, nothing seems to be working. I double-checked my junk and spam folders, and even made sure that $admin_email = "" is correctly set to th ...

When you choose the File->Print option, the PDF contents are seamlessly printed within the document

My web page has an embedded PDF file within the content. <h3>Foo</h3> <object id="foo" data="bigboundingbox.pdf" type="application/pdf" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"> </object> When viewed in Interne ...

Using setInterval() does not automatically fetch JSON data at a specified interval for me

Attempting to constantly update the latitude and longitude coordinates from a dynamic API has proven to be a challenge. Despite utilizing jQuery with a set interval of 1000 milliseconds, the data retrieval from the API does not occur as expected. While i ...

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

I've put together a demonstration that highlights the issue I'm facing. Upon visiting the contact section, you'll notice that all the slickJS slides are stacked vertically initially, but once you interact with them by clicking on the arrow o ...

Exploring ways to incorporate or eliminate animations on mobile devices using html/css

Is it possible to control animations on different devices using media queries? For example, can you show an animation only on mobile devices while hiding it on desktop or laptop? Conversely, is there a way to add an animation specifically for mobile device ...

What's the best way to apply a margin top to an image using Tailwind CSS?

Is there a way to adjust the top margin of an image in Tailwind CSS? I'm having trouble making my logo clearly visible and think giving it some space at the top might help. How can I do this within the Tailwind CSS framework? https://i.sstatic.net/Ae ...

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

Customizing the active state of a Dropdown Item in Bootstrap version 4.5

Recently, I've embarked on the journey of creating my own theme using a combination of SASS and Bootstrap. However, I've hit a little snag when it comes to achieving the desired active appearance for a dropdown item within a navbar. To be complet ...

Width of flex container overflowing from relative position is at its full capacity

I'm attempting to create a horizontal line across an overflowing flex container by using an absolutely positioned child element with both the left and right set to 0. This requires the container to have a relative position to contain the absolutely po ...

Struggling to Fetch Data from REST API with ng-repeat in Angular JS

After making a REST call from Angular JS and receiving a response from the API, I am looking to display messages on the front end using ng-repeat in my controller. $http({ url: "http://localhost:8080/services/AddConfig", method: "POS ...

Tips for creating a rounded bottom for your header

Is it possible to create a rounded header similar to this one? https://i.stack.imgur.com/aYQbA.png ...