Why doesn't the Bootstrap navbar toggle when the button is pressed?

Question

I am trying to build a website with a collapsing navbar. The button has the correct id. Jquery and bootstrap are included in the correct order at the bottom of the body. However when I press the button, nothing happens.

I added additional CSS code to customize my navigation bar. But the navigation bar won't work without the CSS code either, so I'm relatively sure it's not because of that.

Html:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Navbar test </title>
    <link href="../img/faviconlogo.png" rel="shortcut icon" type="image/x-icon">
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="navbarnavbar-default navbar navbar-expand-md navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="index.php">
                <img src="../img/logo.png" alt="" height="40" id="brand-icon-navbar" class="justify-content-center">
            </a>

            <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#collapseNav" aria-expanded="false" aria-controls="collapseNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapseNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 4</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 5</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Site 6</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script src="../js/someJavaScript.js"></script>
    <script class="script" type="text/javascript" src="../js/jquery.js" defer=""></script>
    <script src="../vendor/bootstrap/js/bootstrap.js"></script>
</body>

css:

.navbar-brand {
    font-weight: 600;
}

#brand-icon-navbar{
    vertical-align: -webkit-baseline-middle;
}

.navbar-dark .navbar-nav a {
    display: block;
    color: white !important;
    font-size: 1em;
    font-weight: lighter;
    text-decoration: none;
    margin-right: 1em;
}

.nav-item{
    margin: auto 0;
    margin-left: 1rem;
}

@media (max-width: 840px){
    .navbar .container{
        position: absolute;
        left: 0;
        right: 0;
        max-width: 95%;
        margin: auto;
    }
}

@media (min-width: 840px){
    .navbar .container{
        max-width: 1000px;
    }
}

@media(max-width:835px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    .navbar .navbar-brand {float:none;display: inline-block;}
    .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
    .navbar .navbar-nav {float:none !important;}
    .nav-item{width:100%;text-align:left;} 
    .navbar-toggler {display: block !important;}
    .navbar-toggleable-sm.collapse {display:none !important}
    .navbar-toggleable-sm.collapse.in {display:block !important}
  }

@media (min-width: 768px){
    .navbar-expand-md .navbar-collapse {
        justify-content: space-around;
    }
}

Libraries:

jQuery v3.5.1
Bootstrap v4.3.1

Answer 1

Replace

<script class="script" type="text/javascript" src="../js/jquery.js" defer=""></script>

with

<script src="../js/jquery.js"></script>

Answer 2

I think there is a problem with importing js. Try the 3rd row from below,

as,

Why doesn't the Bootstrap navbar toggle when the button is pressed?

Question

2 answers

solution1
0 2021-11-26 13:00:51

solution2
0 2021-11-26 15:06:37

Why doesn't the Bootstrap navbar toggle when the button is pressed?

Question

2 answers

solution1 0 2021-11-26 13:00:51

solution2 0 2021-11-26 15:06:37

solution1
0 2021-11-26 13:00:51

solution2
0 2021-11-26 15:06:37