Restore list-style in a Bootstrap navigation list

Profile picture for dnlwtsn
dnlwtsn

I am having difficulties restoring the bullet points in a Bootstrap navigation list. My markup is generated by WordPress but the general idea is:

<nav>
    <ul class='nav navbar-nav'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Home</a></li>
    </ul>
</nav>

I've looked through the styles Bootstrap has applied to what is basically a list, and I can't figure out what is removing the list-style which was originally there.

I tried to set things back to the default by using the below, but this hasn't worked.

footer nav ul.nav > li {
    list-style-type:disc;
}

I am hoping there are any Bootstrap wizards out there who can help me resolve this issue.

If you can't change the markup as skelly suggested, you'll have to also override the display property back to list-item, so you're CSS should look like this:

<!-- language: lang-css --> 
footer nav ul.nav > li {
  margin-left: 40px;
  list-style-type: disc;
  display: list-item
}

Demo in Stack Snippets

<!-- begin snippet: js hide: true --> <!-- language: lang-css --> 
footer nav ul.nav > li {
  margin-left: 40px;
  list-style-type: disc;
  display: list-item
}
<!-- language: lang-html --> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<footer>
  <nav>
    <ul class='nav navbar-nav'>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
    </ul>
  </nav>
</footer>
<!-- end snippet -->

There's still a lot of other CSS styles that would be affecting the list type. If you want to remove them all, and if you can run javascript on the page, you can just remove the classes with jQuery like this:

<!-- language: lang-js --> 
$("footer nav ul.nav.navbar-nav").removeClass("nav navbar-nav");

Demo in Stack Snippets

<!-- begin snippet: js hide: true --> <!-- language: lang-js --> 
$("footer nav ul.nav.navbar-nav").removeClass("nav navbar-nav");
<!-- language: lang-css --> 
footer nav ul.nav > li {
  margin-left: 40px;
  list-style-type: disc;
  display: list-item
}
<!-- language: lang-html --> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<footer>
  <nav>
    <ul class='nav navbar-nav'>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
    </ul>
  </nav>
</footer>
<!-- end snippet -->