0

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 class="header">
  <div class="menu-bar">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <img src="{% static 'TableauDeBordMjc/images/logo_mjc.png' %}" alt="">
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav float-end">
            <li class="nav-item">
              <a class="nav-link" href="#">Accueil</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nouveau</a>
            </li>
            <li class="nav-item me-3 me-lg-0 dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
               Logs
              </a>
              <ul class="dropdown-menu" >
                <li>
                  <a class="dropdown-item" href="#">Adhérents</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Salariés</a>
                </li>
              </ul>
            </li>
            <li class="nav-item me-3 me-lg-0 dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                <i class="fas fa-user"></i>
              </a>
              <ul class="dropdown-menu pull-right" >
                <li>
                  <a class="dropdown-item" 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/bootstrap@5.0.2/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

Fujah
  • 1
  • 2
  • Where are you inserting your CSS? Could you make a runnable snippet so we can see the problem for ourselves. See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Jun 29 '22 at 20:45
  • I've donne this https://jsfiddle.net/p0wyx5de/25/ but the behavior is different from my local project. I've put what my website looks like – Fujah Jun 30 '22 at 09:05

2 Answers2

0

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

<button class="border-0 navbar-toggler" 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;
}
kevx
  • 79
  • 9
0

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

Thank you for your help, all.

Fujah
  • 1
  • 2