I'm working with bootstrap 5 and when I try to set border and outline to none on my css file, using the nav-toggler class It won't work.

.menu-bar .navbar-toggler{
    padding-right: 20px;
    outline: none!important;
    border: none!important;
}

It doesn't work on my nav links, I still can see the border.

Here's my html

<div >
  <div >
    <nav >
      <div >
        <img src="{% static 'TableauDeBordMjc/images/logo_mjc.png' %}" alt="">
        
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i ></i>
        </button>

        <div  id="navbarNav">
          <ul >
            <li >
              <a  href="#">Accueil</a>
            </li>
            <li >
              <a  href="#">Nouveau</a>
            </li>
            <li >
              <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
               Logs
              </a>
              <ul  >
                <li>
                  <a  href="#">Adhérents</a>
                </li>
                <li>
                  <a  href="#">Salariés</a>
                </li>
              </ul>
            </li>
            <li >
              <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                <i ></i>
              </a>
              <ul  >
                <li>
                  <a  href="#">Déconnexion</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>

Any ideas why ? Also I have put

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

before closing the body tag.

I put here a img of my web site enter image description here

Thank you

CodePudding user response：

To remove border you can use directly border-0 class to the element.

<button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

For the outline you can check this solution, but I think that what you need is box-shadow property to edit.

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}

CodePudding user response：

I don't know why this didn's work, but I've downgraded and this work now.

Thank you for your help, all.