CODEWITHSUNDEEP
cssasp.net-mvctwitter-bootstrap
HenryCISSP
HenryCISSP

Reputation: 51

Remove bullets on menu items of Bootstrap navbar

An MVC4 Bootstrap example app shows bullet points placed way ahead of the navigation menu items on the navigation bar. separated by brand, even. The bullets appears to be related to tags CSS. Does any one have a clue about removing the bullets? The menu is displayed by navigationextension.cs

       <div class="nav-collapse collapse">
                      @Html.Navigation()
                </div>

Upvotes: 4

Views: 20439

Answers (7)

stevec
stevec

Reputation: 52528

Simply add the "list-unstyled" to the class of the <li> element.

For example, change this:

<li class="nav-item dropdown">

to this:

<li class="nav-item dropdown list-unstyled">

Example from bootstrap docs

This has a random dot:

<li class="nav-item 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>

The only change is I added list-unstyled and there's no dot anymore!

<li class="nav-item dropdown list-unstyled">
  <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>

Upvotes: 1

Javier D.
Javier D.

Reputation: 75

I had the same problem with bullets, plus the <li> elements where invading each other spaces. I solved it by assigning the "nav" class to the <ul> element instead of the "navbar" class I was using. This is a sample of the working list of elements:

<ul class="nav navbar-nav">
    <li><a href="#" (click)="onSelect('recipe')">Recipes</a></li>
    <li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>
</ul>

And this a sample of the list of elements showing up with bullets and overlapped:

<ul class="navbar navbar-nav">
    <li><a href="#" (click)="onSelect('recipe')">Recipes</a></li>
    <li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>
</ul>

This is working at least with Bootsrap version 3.

I found the explanation for this is at the treehouse page: What's the difference between nav and navbar?

Upvotes: 0

Sherry Boxall
Sherry Boxall

Reputation: 11

Try adding style none to li class <li class="nav-item" style="list-style-type: none;" >

Upvotes: 1

kpaul
kpaul

Reputation: 375

Add navbar-nav dropdown to the class

Upvotes: 1

Moni
Moni

Reputation: 924

you can also add class="list-unstyled" to the ul to remove all the bullets.

Removes all default list-style (bullets, left margin, etc.) styling from a or list.

https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp

Upvotes: 4

Mavelo
Mavelo

Reputation: 1259

In case others arrive with a similar issue in Edge with .dropdown-menu

/* Edge fix */
.dropdown-menu,
.dropdown-menu ul {
  list-style-type:none;
}

Note: The 2nd selector covers our custom multi-column dropdowns and can be ignored 😉

Upvotes: 1

mquickel
mquickel

Reputation: 390

You should be able to target the list item (.nav-collapse .li) with the following CSS property:

list-style-type: none;

Upvotes: 11

Related Questions