Upon experimenting with Bootstrap 4, I came across the default navbar template. While using it for learning purposes, I encountered difficulties when trying to modify or style the CSS. I'm having trouble understanding why there is a gap between the navbar and the toggle menu item.
I'm attempting to eliminate this gap, but finding it challenging to achieve the desired result. Here is an image showing the issue: Gap-img
<html>
<head> </head>
<body>
<nav class="navbar navbar-expand-md navbar-inverse navbar-fixed-top" role = "navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Boostrap_logo.svg" width="22" height="22" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-x"> -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="dropdown-divider"></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section>
<div class="container">
<div id="about">
<h1>My title</h1>
<p>Hello World. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium error tempore voluptas iusto. Deleniti impedit repellendus mollitia ad, repudiandae ab fugit ipsa in laboriosam culpa, aspernatur amet quo modi possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ea assumenda, soluta natus culpa debitis perspiciatis repudiandae doloremque eum repellendus fugiat corrupti aspernatur accusamus neque laborum totam voluptates error possimus.</p>
</div>
</div>
</section>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>`
.navbar-collapse {
border: 0;
-webkit-box-shadow: none;
}
.nav-item{
height:49px;
margin-top: 0px;
margin-bottom: 0px;
padding-top:0px;
padding-bottom:0px;
}
/* */
.navbar-default,
.navbar-inverse {
/* SET color for top bar*/
background-color: darkblue;
margin-bottom:20px;
}
.navbar-toggle {
border: 0px;
border-radius: 0px;
padding: 18px;
margin: 0px;
background-color: rgba(0, 0,200, 0.5);
outline: none;
}
.navbar-toggle .icon-bar:nth-of-type(1) {
height: 2px;
top: 1px;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
height: 2px;
top: 0.9px;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
height: 2px;
top: 0.7px;
}
Any assistance on resolving this issue would be highly appreciated.