Bootstrap Navbar Dropdown "Flashes" White When Clicking Off

Question

When you click on the dropdown button on the navbar(button labeled Dropdown), and then click off(anywhere in the page), you can see the dropdown button flash white briefly.

I've seen this quite similar bug: Bootstrap navbar "flashing" when clicking outside of menu to close it. But it, unfortunately, doesn't work(actually copy and pasted the exact same code in css).

Here's a minimal reproducible version of the bug on plunk: https://embed.plnkr.co/plunk/nBIvKcLMkYbey8Oa

Code:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-static-top mb-0">
      <ul class="nav navbar-nav">
        <li class="nav-item dropdown" id="games-dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                Dropdown
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="/games/gravitygame/gravitygame.html">asdf</a></li>
            </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

nav {
    background-color: #26445a !important;
    border-color: #26445a !important;
    margin: 0px !important;
}

.navbar a{
    color: #EEFBFB !important;
}
.navbar-header a{
    font-size: 1.45em !important;
}

.nav >li > a:hover, .nav > li > a:focus{
    background-color: #335369 !important;
}

.nav-item{
    background-color: #26445a !important;
    font-size: 1.23em !important;
}

#games-dropdown > .dropdown-menu a{
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 1.2em !important;
}
#games-dropdown > .dropdown-menu a:hover{
    background-color: #d1d1d1 !important;
    color: #000000 !important;
}

Thanks a lot!

score 3 · Accepted Answer · answered Feb 07 '22 at 07:52

3

It's due to Bootstrap applying a background color on the focus and hover event. So you can override this behavior

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover 
{
  background-color: unset !important;
}

answered Feb 07 '22 at 07:52

nad

1,068
6
16

score 0 · Answer 2 · answered Feb 07 '22 at 08:01

I think that adding lots of new CSS classes might be confusing Bootstrap. In the CSS detailed at your sandbox link there are many different background commands all pointing in one way or another to your navbar and the links in your navbar. These could easily be getting in the way of each other. You don't especially have to add new CSS. You only need to edit the classes that already exist within Bootstrap nav. It's the focus specifically that is causing trouble.

.nav
.navbar-brand
.navbar-dropdown
.navbar-toggler-icon
.menu-item
.dropdown-item

Try removing all your background instructions to begin then add new backgrounds to the above.

Bootstrap Navbar Dropdown "Flashes" White When Clicking Off

2 Answers2