меню гамбургера всегда отображается, даже на рабочем столе

Question

В моей навигационной панели начальной загрузки есть кнопка меню, которая появляется, когда экран становится слишком маленьким и если вы работаете на мобильном телефоне.Работает нормально, но кнопка меню всегда показывает.Даже когда вы находитесь на рабочем столе в полноэкранном режиме, есть кнопка меню и пункты меню.На мобильном устройстве пункты меню отображаются только при нажатии меню, так что это нормально.

Я попытался переместить пункты меню вправо, когда они отображаются, и это прекрасно работает, но после этого кнопка меню всегда отображается.

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