CODEWITHSUNDEEP
htmlcssbootstrap-5
Mazikeen
Mazikeen

Reputation: 13

how to remove border from navigation bar bootstrap dropdown menu

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 class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand m-1" href="#">
      <img src="/static/wg_logo.svg" width="30" height="30" alt="">
    </a>
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Dropdown1</a>
            <a class="dropdown-item" href="#">Dropdown2</a>
            <a class="dropdown-item" href="#">Dropdown3</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" href="#">Navitem1</a>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" href="#">Navitem2</a>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" 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>

Upvotes: 0

Views: 540

Answers (3)

NIKUNJ KOTHIYA
NIKUNJ KOTHIYA

Reputation: 2165

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>

Upvotes: 0

C&#233;dric
C&#233;dric

Reputation: 2629

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 class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand m-1" href="#">
    <img src="/static/wg_logo.svg" width="30" height="30" alt="">
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Dropdown1</a>
          <a class="dropdown-item" href="#">Dropdown2</a>
          <a class="dropdown-item" href="#">Dropdown3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="dropdown-item" href="#">Navitem1</a>
      </li>
      <li class="nav-item">
        <a class="dropdown-item" href="#">Navitem2</a>
      </li>
      <li class="nav-item">
        <a class="dropdown-item" 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>

Upvotes: 0

berkesasa
berkesasa

Reputation: 330

Add your css, please :)

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

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

Upvotes: 1

Related Questions