Bootstrap Navigation - Space Between Menu Items - css

Question

I have the following Bootstrap navigation set up. I want to reduce the space between each li in the ul under the "Coverage" dropdown-toggle. What setting do I use to do this? As a side note, when I set float: left on the ul li a, the space is reduced, but I don't need float to do this. Why does it reduce the space though?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mycontent5" href="/?goHome=true"><span class="glyphicon glyphicon-home"></span></a>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav">
<li>Analysts</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu" id="mynavlist">
<li>All Coverage</li>
<li>Coverage Assignments</li>
<li>Portfolio Coverage</li>
<li>Portfolio Snapshot</li>
<li>Writeup Sections</li>
</ul>
</li>
<li>Funds</li>
<li>Intraday Orders</li>
<li>Reports</li>
</ul>
</div>
</nav>
EDIT: I changed my ul to have an id of "mynavlist", and added the following CSS:
#mynavlist li a {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
This results in the following: I want to get rid of all white space above and below each item. Increasing the px sizes changes my list as expected, but how can I get rid of the extra space?

Answer 1

You have to reduce the top and bottom padding of each item. Try below css
.navbar-default .dropdown-menu>li>a {
padding: 0 20px;
}
/*For responsive*/
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
padding: 0 20px;
}
}
.navbar-default .dropdown-menu>li>a {
padding: 0 20px;
}
/*For responsive*/
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
padding: 0 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mycontent5" href="/?goHome=true"><span class="glyphicon glyphicon-home"></span></a>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav">
<li>Analysts</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Coverage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>All Coverage</li>
<li>Coverage Assignments</li>
<li>Portfolio Coverage</li>
<li>Portfolio Snapshot</li>
<li>Writeup Sections</li>
</ul>
</li>
<li>Funds</li>
<li>Intraday Orders</li>
<li>Reports</li>
</ul>
</div>
</nav>

Answer 2

If you use your browsers Console or Inspector you can view each HTML element and any CSS that is being applied to that element. In the case of Bootstrap's Navbar component you will find the following:
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
Changing 15px to some other value will result in your desired output, though you should note that Bootstrap modifies the top and bottom padding for this element based on certain media breakpoints: you will need to account for this in your customizations.