如何删除由引导程序创建的这个白条？

Question

我正在尝试创建一个响应式导航栏，我想让它在背景图像上透明。 但是我对前端知之甚少，学了一个星期。 如何删除此白条并将导航栏留在图像顶部？ 我的想法是做这样的事情：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

只需删除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>

一个例子：

<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>