how to remove border from navigation bar bootstrap dropdown menu-CodePudding

I using Bootstrap 5 navigation bar and I want to remove blue border from "Dropdown" when I click to it, but I don't understand how to do it. I tried to find an answer but I couldn't find any.

<nav >
    <a  href="#">
      <img src="/static/wg_logo.svg" width="30" height="30" alt="">
    </a>
    
    <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarNavDropdown">
      <ul >
        <li >
          <a  href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div  aria-labelledby="navbarDropdownMenuLink">
            <a  href="#">Dropdown1</a>
            <a  href="#">Dropdown2</a>
            <a  href="#">Dropdown3</a>
          </div>
        </li>
        <li >
          <a  href="#">Navitem1</a>
        </li>
        <li >
          <a  href="#">Navitem2</a>
        </li>
        <li >
          <a  href="#">Navitem3</a>
        </li>
      </ul>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

CodePudding user response：

Add your css, please :)

.dropdown-item.active, .dropdown-item:active {
    background-color: transparent !important;
    color: black !important;
}

.dropdown-item:hover {
    background-color: transparent !important;
}

CodePudding user response：

You can check that the blue background-color is set on .active and :active, you can remove it by selecting these cases.

.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-item:active {
  background-color: transparent;
  color: unset;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<nav >
  <a  href="#">
    <img src="/static/wg_logo.svg" width="30" height="30" alt="">
  </a>

  <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
  <div  id="navbarNavDropdown">
    <ul >
      <li >
        <a  href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
        <div  aria-labelledby="navbarDropdownMenuLink">
          <a  href="#">Dropdown1</a>
          <a  href="#">Dropdown2</a>
          <a  href="#">Dropdown3</a>
        </div>
      </li>
      <li >
        <a  href="#">Navitem1</a>
      </li>
      <li >
        <a  href="#">Navitem2</a>
      </li>
      <li >
        <a  href="#">Navitem3</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

CodePudding user response：

Inside your <head> </head> section after load all css you need to add custom css for dropdown overwrite.

<style>
.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-item:active {
  background-color: transparent !important;
  color: unset !important;
}
</style>