Color of the Background in the Active Page/Tab Menu

I've been struggling with this issue for hours now. I just can't figure out how to make the active page's menu tab have a white background.

<!DOCTYPE html>
<html>

<head>
  <!-- Include Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-info">
    <div class="container-fluid">
      <a class="navbar-brand" href="index.html">
        <img src="image/nav_bar/qsc_burgee_bg_trans.png" width="auto" height="30" class="d-inline-block align-top" alt="">
        <strong>QSC</strong>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav nav-tabs">
          <!-- NavBar content goes here -->
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

  <script>
    // JavaScript code for setting active class
  </script>

  <style>
.navbar-nav .nav-link .nav-tabs .nav-item{
  color: black;
}

  .custom-navbar {
    background-color: white;
  }
  
  .nav-tabs .nav-item .nav-link.active,
    .nav-tabs .nav-item .nav-link:hover {
      background-color: white;
      color: #000;
    }
  </style>

</body>

</html>

Even though I managed to change the background to white on hover, I still can't get it to stay white when the tab is active. Any assistance would be greatly appreciated as I am not an expert in coding!

Answer №1

Have you considered adding the is-active class to your currently active menu item? Maybe something along these lines:

<a class="nav-link dropdown-toggle text-dark <?php echo ($activePage === 'about_us.html') ? 'is-active' : ''; ?>" href="#" role="button"
          data-bs-toggle="dropdown">About Us</a>

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

File remains visible after deletion upon refreshing the page, but disappears after using the Ctrl + F5

After deleting a file on the server, I noticed that it still appeared when I refreshed the page. However, when I tried to do a hard refresh by pressing ctrl+F5, it resulted in a 404 error. This behavior is puzzling to me - shouldn't a simple refresh s ...

Checking form entries and updating HTML

Prompt Description: In my endeavor to authenticate a <form> on the server side, I have opted to send form inputs as JSON to the back-end (an express.js app) using AJAX. Post-validation, another JSON is dispatched to the front-end with a structure ak ...

What is the best way to center two items within a border?

Here is the CSS code I wrote to center align my text with a bottom border: .arrow-down { width: 2rem; display: inline; position: absolute; top: -0.6rem; left: 50%; margin-left: -59px; background: $grey_200; z-index: 5; } .showless > se ...

How to manually implement a scrollspy feature in Angular

I am facing an issue with implementing scrollspy inside a MatDialog. The event activate.bs.scrollspy doesn't appear to be triggering as expected. It seems like it might be firing at a window level and not highlighting the anchors on my navbar as I scr ...

Implement the CSS display flex property for more flexible layouts

After working on some HTML code, I found the following: <section class = "personal_proyects"> <article> <div class = "personal_details"> <h3>Canal YT: Codigo RM</h3> < ...

What is the correct way to properly insert a display none attribute

I'm experiencing some alignment issues with the images in my slideshow. I used this example as a reference to create my slide: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots When clicking on the next image, it seems to mo ...

Trigger fixed element to appear/disappear when scrolling using JavaScript

I've tried multiple solutions, but I can't seem to get this functionality to work properly on my website. I'm attempting to create a "schedule a demo" button similar to the one on www.bamboohr.com Currently, I have the following html, css, ...

Utilize Vue.js to easily upload images alongside form input fields

I have recently started a small project with Vue Js. I am trying to incorporate an upload file option in my contact form. Due to the numerous input text fields, I am using serialize for the form. However, I am facing issues with the append function. How ca ...

What is the best way to retrieve a particular value from a database using PHP?

$sql="Select chanceNo From gm_gacha_token1 where token_code='$mytoken'"; $result=mysql_query($sql); $count=mysql_num_rows($result); Language: PHP I am attempting to retrieve a single value of `chanceNo. Is there a way to get this value and stor ...

Off Canvas left navigation menu using Bootstrap

I am working on creating a responsive layout for a webpage using Bootstrap. On larger displays, such as desktop resolutions, I want the webpage to show the header and left navigation as normal. However, when the site is resized to that of tablets or mobile ...

flexible side-by-side alignment - adaptable grids

I am currently working on a website project that involves a ul list with responsive columns. The column width adjusts based on the window size, and I aim to center-align the text within the li element according to the new column width. If you want to view ...

What are the steps to repairing the footer on your website?

Here is the issue I am facing: The footer in my HTML code appears after the grid. How can I fix this problem and make my footer fixed? Below is my HTML and CSS code for reference: <footer> <li><a href="">Menu</a>< ...

Heroku encounter an H14 error - "the absence of running web processes"

An H14 error occurred during deployment on Heroku. Here is my Procfile: web: gunicorn -w 4 -b 0.0.0.0:$PORT -k gevent main:app Error log on Heroku: 2017-01-23T10:42:58.904480+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method ...

Struggling to target the child elements of an unordered list with jQuery?

Need help with selecting the children of a list item in a jQuery mobile navigation? I am having some trouble with this task. Here is a fiddle demonstrating what I have done so far: http://jsfiddle.net/jhrz9/ <div data-role="panel" id="left-panel" data ...

Initiating a horizontal scroll menu at the center of the screen: Step-by

I need assistance setting up a horizontal scrolling menu for my project. The requirement is to position the middle button in the center of the .scrollmenu div. Currently, I am working with HTML and CSS, but open to suggestions involving javascript as well ...

What is causing the tabs to not update the navigation in nav-tabs?

I recently implemented a tab list using Bootstrap, similar to the one shown in the image below: https://i.sstatic.net/KEy7F.png However, I encountered an issue where clicking on "Profile" or "Contact" tabs does not change anything. Even though I inclu ...

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

Here is a CSS flip setup that I have been working on in this fiddle: http://jsfiddle.net/6r82fzk6/ The Goal: I am trying to achieve a slower transition for the back element compared to everything else. The idea is to have the child element of the back fac ...

Cleaning up HTML5 video content

I have been on the search for a solution that would allow me to "scrub" through HTML5 video. So far, I have not come across one and was considering developing my own. However, before diving into that process, I wanted to seek advice from the community here ...

Bootstrap 5 - Inactive toggle switch

I am facing an issue with a toggle button that I have created using Bootstrap 5. It does not seem to be working as intended. On my website, the navigation bar displays all links on larger screens and shows the toggle button on smaller screens. However, wh ...

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...