CODEWITHSUNDEEP
javascripthtmljquerycss
Totally_New
Totally_New

Reputation: 5

Bootstrap navbar toggle button is not working when reducing the width of the window

I have tried most of the solutions but for some reason, it's not working for me. This is a simple navbar from bootstrap. But when I reduce its width the toggle button does expand and show the menu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--Bootstrap css file-->
    <link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body>


            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#"><img class="logo" src="./img/logo.png" alt="logo"></a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar"     aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <div class="mr-auto"></div>
                  <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="#about-area">About_Me</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#work-exp">Work_Experience</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#project-area">Projects</a>
                    </li>
                  </ul>
                </div>
              </nav>
     
</body>

<!-- Jquery js file-->
<script src="./jquery3.5.1.js"></script>

<!--Bootstrap js file-->
<script src="./bootstrap.min.js"></script>   
</html>

Upvotes: 0

Views: 183

Answers (1)

S&#233;bastien Gicquel
S&#233;bastien Gicquel

Reputation: 4386

I think the issue is related to :

data-target="#navbar"

You should have :

<div class="collapse navbar-collapse" id="navbar">

instead of :

<div class="collapse navbar-collapse" id="navbarNav">

Here is a working example of your code :

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#"><img class="logo" src="http://via.placeholder.com/100x50" alt="logo"></a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
    <div class="collapse navbar-collapse" id="navbar">
      <div class="mr-auto"></div>
      <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="#about-area">About_Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#work-exp">Work_Experience</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#project-area">Projects</a>
        </li>
      </ul>
    </div>
  </nav>

</body>


</html>

Upvotes: 1

Related Questions