Toggle button appears but does not toggle when clicked

Question

I am trying to make a toggle button in Bootstrap. At low widths, the toggle button does show, however, it does not respond whenever I click it. At high widths the menu just shows on the top right, which works fine.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Welcome</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="styling.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">


</head>
<body>
    <video autoplay loop muted id="bgvideo"><source src="videos/Sea%20top%20view.mp4" type="video/mp4"></video>

    <!--Create navigation bar with srollspy-->
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="mynavBar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">Company page</a>
                 <button type="button" class="navbar-toggle" data-target="#navbarCollapse" datatoggle="collapse">

                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>  
                </button>
            </div>
            <div class="navbar-collapse collapse" id="navbarCollapse">
            <ul class="nav navbar-nav pull-right">
                <li class="active"><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#promise">Promise</a></li>
            </ul>
            </div>
        </div>
    </nav>

    <div>
    </div>


    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/j
query.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

What can I do to not only show the toggle button, but also let it show the menu whenever I click it?

I checked:

Bootstrap toggle not button does not work However, there the problem is that it doesn't work at certiain widths. Mine doesn't work in general.

Bootstrap 3.3.2 navbar dropdown menu toggle not clickable on mobile or desktop Gave the suggestion that the jQuery scripts needs to be included before the Bootstrap script. However, this is the case for my code already.

Answer 1

You forgot to add data-toggle="collapse" to the collapse button like this

    <nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="mynavBar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">Company page</a>
                 <button data-toggle="collapse" type="button" class="navbar-toggle" data-target="#navbarCollapse">
                  <!-- remaining button code -->
                </button>
            </div>
            <!-- your collapse div code -->
        </div>
    </nav>

Toggle button appears but does not toggle when clicked

Question

1 answers

solution1
2 ACCPTED 2019-08-16 22:58:21

Toggle button appears but does not toggle when clicked

Question

1 answers

solution1 2 ACCPTED 2019-08-16 22:58:21

solution1
2 ACCPTED 2019-08-16 22:58:21