How do I remove the black dots on the right side of nav-items in my bootstrap 5 navbar?

Question

I have bootstrap 5 navbar and all is working well except the nav-items all have a black dot on the right side of the text.

Here is the code for that section. I have tried changing things like arguments and even commenting out the css and javascript but as yet have not found the key.

<nav class="navbar navbar-expand navbar-dark fixed-top">
      <div class="container-fluid">
          <a class="navbar-brand" href="/">Correlator 2</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
              aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item fs-5">
                      <a class="nav-link active" aria-current="page" href="/">Home .</a>
                  </li>
                  <li class="nav-item fs-5">
                      <a class="nav-link" href="/admin/">Admin Pages .</a>
                  </li>
                  <li class="nav-item fs-5 dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          Dropdown
                      </a>
                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <li><a class="dropdown-item" href="#">Action</a></li>
                          <li><a class="dropdown-item" href="#">Another action</a></li>
                          <li>
                              <hr class="dropdown-divider">
                          </li>
                          <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                  </li>
                  <li class="nav-item fs-5">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>

              </ul>

              <form class="d-flex">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-primary" type="submit">Search</button>
              </form>

              <li class="nav-item dropdown notification-section">
                  <a href="#" class="notification dropdown-toggle" id="navbarDropdown" role="button"
                      data-bs-toggle="dropdown" aria-expanded="true">
                      <span><i class='fa fa-bell'></i></span>
                      <span class="badge" id="notification-badge">0</span>
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown" id="notifications-dropdown"
                      data-popper-placement="bottom-end"
                      style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(-70px, 42px, 0px);">
                      
                      {% for i in notifications %}
                      <li class="dropdown-item">{{i.message}}</li>
                      <hr class="dropdown-divider">
                      {% endfor %}
                      {% comment %} <li class='dropdown-item'>Hello</li>
                      <hr class="dropdown-divider"> {% endcomment %}
                      
                  </ul>
              </li>

              <div class="flex-shrink-0 dropdown" style="margin-right: 20px">
                  <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle show" id="dropdownUser2"
                      data-bs-toggle="dropdown" aria-expanded="true">
                      <img src="{% static 'mike-oliver.jpg' %}"" alt="MO" width="50" height="50"
                          class="rounded-circle">
                  </a>
                  <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"
                      data-popper-placement="bottom-end"
                      style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(-110px, 50px, 0px);">
                      <li><a class="dropdown-item" href="#">New project...</a></li>
                      <li><a class="dropdown-item" href="#">Settings</a></li>
                      <li><a class="dropdown-item" href="#">Profile</a></li>
                      <li>
                          <hr class="dropdown-divider">
                      </li>
                      <li><a class="dropdown-item" href="#">Sign out</a></li>
                  </ul>
              </div>

          </div>
      </div>

Here is the resulting display, i just showed the left most nav-items but they all have the same black dots.

How do I remove those black dots?

Answer 1

Because your nav element is structured using <ul> and <li> elements, you're going to want to remove the ::marker element.

You're going to need to add the following css:

li 
{
    list-style-type: none;
}