CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
unkownhihi
unkownhihi

Reputation: 27

Bootstrap Navbar Dropdown "Flashes" White When Clicking Off

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!

Upvotes: 0

Views: 515

Answers (2)

Cutey from Cute Code
Cutey from Cute Code

Reputation: 1144

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.

Upvotes: 0

nad
nad

Reputation: 1100

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;
}

Upvotes: 3

Related Questions