html - 汉堡菜单始终显示，即使在桌面上也是如此

Question

在我的 bootstrap 导航栏中，如果屏幕太小并且您使用的是移动设备，则会出现一个菜单按钮。它工作正常，但菜单按钮始终显示。即使您在全屏桌面上，也有一个菜单按钮和菜单项。在移动设备上，菜单项仅在您单击菜单时显示，所以这很好。

我尝试在菜单项显示时向右移动菜单项，效果很好，但在那之后，菜单按钮始终显示。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <nav class="navbar navbar-expand-lg  fixed-top bg-inverse" id="mainNav">
    
        <div class="bubbel mr-auto bg-light">
            <a class="navbar-brand" href="#">
                <img src="img/timmerbedrijfvlot-transparant.png" alt="Logo" class="logo-nav">
            </a>
        </div>
        <button class="navbar-uppercase bg-dark text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto  float-right text-right pr-3">
                <li class="nav-item">
                    <a class="nav-link text-dark" href="#section1">Section 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" href="#section2">Section 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" href="#section3">Section 3</a>
                </li>
            </ul>
        </div>
    
    </nav>

Answer 1

将类 navbar-toggler 添加到您的按钮。

<nav class="navbar navbar-expand-lg  fixed-top bg-inverse" id="mainNav">

    <div class="bubbel mr-auto bg-light">
        <a class="navbar-brand" href="#">
            <img src="img/timmerbedrijfvlot-transparant.png" alt="Logo" class="logo-nav">
        </a>
    </div>
    <button class="navbar-toggler navbar-uppercase bg-dark text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto  float-right text-right pr-3">
            <li class="nav-item">
                <a class="nav-link text-dark" href="#section1">Section 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="#section2">Section 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="#section3">Section 3</a>
            </li>
        </ul>
    </div>

</nav>