Badge increases navbar height - css

Question

I have the following HTML for a bootstrap navbar.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 33px;
padding-bottom: 20px;
}
.body {
font-size: 16px;
border-spacing: 2px;
border-collapse: separate;
text-align: center;
}
.body a {
text-decoration: underline;
}
.navbar-fixed-top {
background-color: #5b5b5b;
min-height: 33px;
border-style: none;
}
.navbar-toggle {
margin-top: 2px;
margin-bottom: 2px;
padding-top: 7px;
padding-bottom: 7px;
}
.navbar-nav>li>a {
line-height: 3px;
padding-top: 16px;
padding-bottom: 14px;
}
div.navbar-header>img {
height: 30px;
margin-top: 2px;
}
.nav>li>a {
font-size: medium;
font-family: "Helvetica Bold", sans-serif;
/*font-weight: bold;*/
text-transform: uppercase;
}
.navbar-inverse .navbar-nav>li>a {
color: #f0eed0;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #f8dc54;
}
.nav li {
display: inline;
}
#vugraph-menu.inprogress>a {
color: black;
background-color: #ecbe23;
}
#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
color: white;
}
</style>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="http://www.bridgebase.com/images/bbo_red.png">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="nav navbar-collapse collapse">
<div class="container">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify"></span></a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">Watch</li>
<li class="dropdown-item">Schedule</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
</ul>
</div>
</div>
</div>
</nav>
With no badge this looks like:
I have JavaScript that dynamically fills in the #vugraph-count badge. When it has contents, the height of the navbar increases by more than 15 pixels. The HTML becomes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 33px;
padding-bottom: 20px;
}
.body {
font-size: 16px;
border-spacing: 2px;
border-collapse: separate;
text-align: center;
}
.body a {
text-decoration: underline;
}
.navbar-fixed-top {
background-color: #5b5b5b;
min-height: 33px;
border-style: none;
}
.navbar-toggle {
margin-top: 2px;
margin-bottom: 2px;
padding-top: 7px;
padding-bottom: 7px;
}
.navbar-nav>li>a {
line-height: 3px;
padding-top: 16px;
padding-bottom: 14px;
}
div.navbar-header>img {
height: 30px;
margin-top: 2px;
}
.nav>li>a {
font-size: medium;
font-family: "Helvetica Bold", sans-serif;
/*font-weight: bold;*/
text-transform: uppercase;
}
.navbar-inverse .navbar-nav>li>a {
color: #f0eed0;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #f8dc54;
}
.nav li {
display: inline;
}
#vugraph-menu.inprogress>a {
color: black;
background-color: #ecbe23;
}
#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
color: white;
}
</style>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="http://www.bridgebase.com/images/bbo_red.png">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="nav navbar-collapse collapse">
<div class="container">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify">1</span></a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">Watch</li>
<li class="dropdown-item">Schedule</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
</ul>
</div>
</div>
</div>
</nav>
and the rendered navbar looks like:
(I had to put our custom CSS inline in the HTML box of the snippet, because otherwise bootstrap.min.css was taking priority over the custom styles.) You'll need to use the "Full page" option of the stack snippets to get the non-collapsed navbar.
The problem appears to be related to the .navbar-nav>li>a style line-height: 3px. When I remove that, the navbar is always too tall. This is being used to reduce the navbar height to match the logo on the left. For some reason, when the badge is added, it's overriding this (although it's not striked out in the DOM inspector).

Answer 1

The badge is not causing the problem, you can check next example with two navbars (one with badge filled with a number, other without it) where both have similar height (like Chris Bar already noted). So:
1) It could be a problem with some of your custom CSS, in this case, I recommend to use the inspector tool to check what style is added to your badge or navbar.
2) Another thing you could do is check if you have a well structured navbar as explained on Bootstrap Navbar.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar 1</a>
</div>
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Vugraph
<span id="vugraph-count" class="no-padding badge badge-notify">99</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">
Watch
</li>
<li class="dropdown-item">
Schedule
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<!-- Brand and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar 2</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Vugraph
<span id="vugraph-count" class="no-padding badge badge-notify"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">
Watch
</li>
<li class="dropdown-item">
Schedule
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a>
</li>
</ul>
</div>
</div>
</nav>
Finally, I don't believe that updating to Bootstrap 4 will help here, indeed, you will have to port your entire site to the new version because there are thing that changed from version 3 to 4 (Read more here).
Update
After the question was updated with the custom style applied on the elements, a possible solution is to add next style to the badge:
{line-height: 0; display: inline;}
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Move down content because we have a fixed navbar that is 50px tall */
#vugraph-count {
line-height: 0;
display: inline;
}
body {
padding-top: 33px;
padding-bottom: 20px;
}
.body {
font-size: 16px;
border-spacing: 2px;
border-collapse: separate;
text-align: center;
}
.body a {
text-decoration: underline;
}
.navbar-fixed-top {
background-color: #5b5b5b;
min-height: 33px;
border-style: none;
}
.navbar-toggle {
margin-top: 2px;
margin-bottom: 2px;
padding-top: 7px;
padding-bottom: 7px;
}
.navbar-nav>li>a {
line-height: 3px;
padding-top: 16px;
padding-bottom: 14px;
}
div.navbar-header>img {
height: 30px;
margin-top: 2px;
}
.nav>li>a {
font-size: medium;
font-family: "Helvetica Bold", sans-serif;
/*font-weight: bold;*/
text-transform: uppercase;
}
.navbar-inverse .navbar-nav>li>a {
color: #f0eed0;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #f8dc54;
}
.nav li {
display: inline;
}
#vugraph-menu.inprogress>a {
color: black;
background-color: #ecbe23;
}
#vugraph-menu.inprogress>a:hover,
#vugraph-menu.inprogress.open>a:not(:hover) {
color: white;
}
</style>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="http://www.bridgebase.com/images/bbo_red.png">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="nav navbar-collapse collapse">
<div class="container">
<ul class="nav navbar-nav">
<li id="vugraph-menu" class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Vugraph <span id="vugraph-count" class="badge badge-notify">1</span></a>
<ul class="dropdown-menu" aria-labelledby="navbar-vugraph-menu-link">
<li class="dropdown-item">Watch</li>
<li class="dropdown-item">Schedule</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/myhands/index.php" target="_blank">Hand Records</a></li>
<li class="nav-item"><a class="nav-link" href="//www.bridgebase.com/points/index.php" target="_blank">Masterpoints</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.bridgebase.com/purchase/pay.php" target="_blank">BB$</a></li>
</ul>
</div>
</div>
</div>
</nav>

Answer 2

Check out this quick test that measures the height of the nav items with and without a badge. There is a small difference, but not much. only 0.04 pixels.
You might have other CSS that is interfering and makes the badge a bit taller. If the padding or line-height of the .badge is made smaller, then the two nav items have the same height. See the commented out CSS code, uncommenting this fixes the issue in the demo here
document.querySelectorAll('.nav-item').forEach((el) => {
console.log(el.innerText + ' Height: ' + el.getBoundingClientRect().height + 'px')
});
.nav-item {
border: 1px solid red;
}
.nav-item .badge {
/*line-height: 90%;*/
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
<div id="navbar" class="nav navbar-collapse">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">No Badge</a>
</li>
<li class="nav-item dropdown" title="No tables in play">
<a id="navbar-vugraph-menu-link" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Has Badge <span id="vugraph-count" class="badge badge-notify">1</span></a>
</li>
</ul>
</div>
</div>