如何更改导航栏中活动下拉菜单的颜色

Question

When I click on the dropdown menu this is always highlighted in blue. How can I fix this with Bootstrap or a change of my CSS?

With this CSS element I already tried to change the color:

.dropdown-item.active, .dropdown-item:active
 color: red
 background-color: darkviolet

HTML:

<nav class="nav-justified navbar-expand-xl navbar-light">
        <div class="" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto nav-pills nav-fill">
            <li class="nav-item active">
              <a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="überuns.html">Über uns</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Konakt.html">Kontakt</a>
            </li>
            <li class="nav-item dropdown dropdown">
              <a class="nav-link dropdown-toggle" href="Maschinen.html" 
id="navbarDropdown" role="button" data-toggle="dropdown" aria- 
haspopup="true" aria-expanded="false">
                  Dropdown
              </a>
              <div class="dropdown-menu" aria- 
enter code herelabelledby="navbarDropdown">
                <a class="dropdown-item" href="1.html">Element 1</a>
                <a class="dropdown-item" href="2.html">Element 2</a>
                <a class="dropdown-item" href="3.html">Element 3</a>
                <a class="dropdown-item" href="4.html">Element 4</a>
                <a class="dropdown-item" href="5.html">Element 5</a>
                <a class="dropdown-item" href="6.html">Element 6</a>
              </div>

Answer 1

.dropdown-item:active use this

 .dropdown-item:active{ color: red; background-color: darkviolet} 

 <nav class="nav-justified navbar-expand-xl navbar-light"> <div class="" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto nav-pills nav-fill"> <li class="nav-item active"> <a class="nav-link" href="home.html">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="überuns.html">Über uns</a> </li> <li class="nav-item"> <a class="nav-link" href="Konakt.html">Kontakt</a> </li> <li class="nav-item dropdown dropdown"> <a class="nav-link dropdown-toggle" href="Maschinen.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria- enter code herelabelledby="navbarDropdown"> <a class="dropdown-item" href="1.html">Element 1</a> <a class="dropdown-item" href="2.html">Element 2</a> <a class="dropdown-item" href="3.html">Element 3</a> <a class="dropdown-item" href="4.html">Element 4</a> <a class="dropdown-item" href="5.html">Element 5</a> <a class="dropdown-item" href="6.html">Element 6</a> </div> 

Answer 2

The default css is generated from nav.scss

Add this into your custom css file to change background color :

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link{
     background:darkviolet 
}

I would also suggest you to use custom class for navbar like my-custom-nav and use as parent for above css like :

.my-custom-nav .nav-link.active, 
.my-custom-nav .show>.nav-link{
     background:darkviolet 
}