How can I change the background color of an active link in a Bootstrap dropdown menu?

Question

I am desperately trying to change the background color of the Bootstrap 5.3 dropdown menu whose link is active.

When I am on a page, the menu link for that page appears in bold, but when that page is contained in the dropdown menu, the menu link has a blue (primary) background, which does not match my theme, and I would like to change it.

When I test different CSS code, I can change the color when I hover over it with my mouse, as well as when I click on it, but the link turns blue again when I am on the page.

Here's my html:

        <a class="navbar-brand" href="index.php">
            Title
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
            <ul class="navbar-nav text-center">
                <li class="nav-item">
                    <a class="nav-link<?php if ($nom_fichier == "index")  {echo ' active" aria-current="page';} ?>" href="index.php">Accueil</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link<?php if ($nom_fichier == "qui-suis-je")  {echo ' active" aria-current="page';} ?>" href="qui-suis-je.php">Qui suis-je ?</a>
                </li>
                <li class="nav-item dropdown"> <!-- class="nav-item dropdown" -->
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    sous-menu
                    </a>
                    <ul class="dropdown-menu text-center">
                        <li><a class="dropdown-item<?php if ($nom_fichier == "allaitement-maternel")  {echo ' active" aria-current="page';} ?>" href="allaitement-maternel.php">allaitement maternel</a></li>
                    </ul>
                </li>
            </ul>
        </div>

And my css:

    .navbar-nav > li > .dropdown-menu a:focus,
    .navbar-nav > li > .dropdown-menu a:hover,
    .navbar-nav > li > .dropdown-menu a:active {background-color: #FF0000; }

And here the result when I over the menu "Massage bébé":

Affichage du menu

tacoshy · Accepted Answer · 2025-11-04 00:29:32Z

:active does not mean that the user is currently on that site but that an interactive element is currently used. If you swap to another page you effectively reload the page and the :active as such is lost.

Ref: MDN WebDocs: :active

Bootstrap chanegs the color by using the CSS-class .active.

Your code indicates that you add that class with PHP by using:

<?php if ($nom_fichier == "index")  {echo ' active" aria-current="page';} ?>

As such you can simply use CSS to change the background-color:

.active {
  background-color: #FF0000; 
}

PS: Instead of computing it server-sided you can use the suers computing power and add the class on the client-side with JS:

window.addEventListener('DOMContentLoaded', function() {
  const ANCHORS = document.querySelectorAll('.nav-link');
  ANCHORS.forEach(anchor => {
    anchor.classList.toggle('active', anchor.href == window.location.pathname);
  })
})

Thank you very much. I changed the class in the dropdown menu from “active” to “activeDropdown,” and that allowed me to get the CSS to work. <li><a class="dropdown-item<?php if ($nom_fichier == "allaitement-maternel") {echo ' activeDropdown" aria-current="page';} ?>" href="allaitement-maternel.php">Allaitement maternel</a></li> .activeDropdown { background-color: rgb(226, 166, 145); }

Collectives™ on Stack Overflow

How can I change the background color of an active link in a Bootstrap dropdown menu?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related