How to remove this white bar created by bootstrap? - html

Question

I’m trying to create a responsive navbar, and I’d like to make it transparent over the background image.
But I have little knowledge in front-end, I’ve been learning for a week.
How can I remove this white bar and leave my navbar on top of the image ?
My idea was to do something like this : https://bootstrapmade.com/demo/Restaurantly/
#background{
width: 100%;
height: 100vh;
background: url(https://image.freepik.com/fotos-gratis/pranchas-de-madeira-com-fundo-borrado-restaurante_1253-56.jpg) top center;
filter: brightness(30%);
background-size: cover; /* parallax */
background-attachment: fixed;
background-position: center;
position: relative;
padding: 0;
}
#header{
background: rgba(12, 11, 9, 0.6);
transition: all 0.5s;
z-index: 997;
top: 100px;
}
.navbar ul{
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
li a{
color: white;
font-size: 1.2rem;
font-family: 'Inconsolata', monospace;
font-weight: bold;
}
li a:hover{
color: #759c4d;
}
ul, li{
list-style-type: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg " id="header">
<div class="container-fluid">
<a href="#" class="navbar-brand">
<img src="/Logos/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#produtos">Produtos</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Adega</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Hortaliça</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Promoções</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Localização</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="background" class="d-flex align-items-center"></section>

Answer 1

Just remove button:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
An example:
<nav class="navbar navbar-expand-lg " id="header">
<div class="container-fluid">
<a href="#" class="navbar-brand">
<img src="/Logos/logo.png" alt="">
</a>
<!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#produtos">Produtos</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Adega</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Hortaliça</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Promoções</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Localização</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto active" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="index.js"></script>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>