Bootstrap navbar not working on mobile?

B

Bahtiar Akimkanov2020-04-29 21:32:41

Bootstrap

Bahtiar Akimkanov, 2020-04-29 21:32:41

I connected the latest version of bootstrap connected as it should be first jquery then bootsrap.bundle.min.js but the sandwich that opens the menu on mobile devices does not work in the console an error occurs? Everything connected correctly but does not want to work, who can explain what the problem is here is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-md navbar-light bg-white">
            <img src="img/logo.png" alt="" srcset="" class="navbar-brand">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
            </div>
          </nav>
    </div>
</body>
</html>

and here is the error that the console prints
collapse.js:346 Uncaught TypeError: Cannot convert object to primitive value
at RegExp.test ()
at HTMLDivElement. (collapse.js:346)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at S.fn.init.a._jQueryInterface [as collapse ] (collapse.js:337)
at HTMLDivElement. (collapse.js:385)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at HTMLButtonElement. (collapse.js:381)
at HTMLDocument.dispatch(jquery.min.js:2)

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

B

Bahtiar Akimkanov, 2020-04-30
@Bahtiar

Issue resolved. For some reason, jquery does not want to work together with above 3.0.0. Connected jquery 3.0.0 and everything worked

I

Igor, 2020-04-29
@loonny

Read the error "Cannot convert object to primitive value" which translates as "Unable to convert object to primitive value", look at the line where the error is, and so on. With all the desire, no one will tell you exactly anything, because you provided the HTML code in JS to solve the error.
Perhaps for some reason you changed the bootstrap scripts and screwed up, because I connected everything like you have, and I have no errors.
snippet