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.

Tunji Oyeniran · Accepted Answer · 2020-07-23 22:33:15Z

2

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>

edited Jul 23, 2020 at 22:33

answered Aug 16, 2019 at 22:58

Tunji Oyeniran

4,4541 gold badge20 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Toggle button appears but does not toggle when clicked

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related