汉堡菜单始终显示,即使在台式机上也是如此

时间:2019-06-27 17:32:17

标签: html css bootstrap-4

在我的引导导航栏中,有一个菜单按钮,当屏幕过小并且您在移动设备上时会出现。 它工作正常,但菜单按钮始终显示。即使在全屏桌面上,也存在菜单按钮和菜单项。 在移动设备上,菜单项仅在您单击菜单时显示,这样就可以了。

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

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

1 个答案:

答案 0 :(得分:0)

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