CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3togglenavbar
Prabhat Singh
Prabhat Singh

Reputation: 1

navbar Toggle in bootstrap is not working

I am trying to work on twitter bootstrap to make a responsive website although i am facing some problem with the navigation toggle button I have included all the libraries which was the issue for some of the questions asked here still I am unable to know the exact problem.

body {
  font-family: Arial, serif;
  background: url(https://freenaturestock.s3.us-east-1.amazonaws.com/1602.jpg) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}


/* editing the logo part*/

.logo {
  height: 32px;
  opacity: 1;
}


/*  editing the navbar background colour*/

.navbar-inverse {
  background: rgba(0, 0, 0, 0.5);
}


/* navbar list options editing*/

.nav li {
  color: #fff;
  font-size: 17px;
  margin-right: 15px;
  padding: 10px 15px;
}

.nav li:hover {
  border-bottom: 3px solid #00FFB8;
  padding-bottom: 3px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  < meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebServ</title>
    <link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="styling.css">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="30">
  <!-- Create a nav bar-->
  <div class="container-fluid">


    <nav role="navigation" class="navbar nav-tabs navbar-inverse bg-inverse navbar-toggleable navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Toggle navigation</span>
          <!--  <span class="navbar-toggler-icon"></span>-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
          <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class=" collapse navbar-collapse" id="myNavbar ">
          <ul class=" nav navbar-nav navbar-right mylist">
            <li class="nav-item" role="presentation"><a class="nav-link" href="#home"><span class="glyphicon glyphicon-home" style="padding: 8px;"></span>Home</a></li>
            <li class="nav-item" role="presentation" " ><a class="nav-link " href="#about "><span class="glyphicon glyphicon-user " style="padding: 8px " ;></span>About</a>
            </li>
            <li class="nav-item " role="presentation "><a class="nav-link " href="#portfolio "><span class="glyphicon glyphicon-list-alt " style="padding: 8px; "></span>Portfolio</a></li>
            <li class="nav-item " href="#role=" presentation "><a class="nav-link " href="#contact "><span class="glyphicon glyphicon-earphone " style="padding: 8px; "></span>Contact</a></li>
          </ul>
        </div>

      </div>

    </nav>
  </div>
</body>

</html>

https://codepen.io/webserv01/pen/rNxKVrN

Upvotes: 0

Views: 896

Answers (1)

Simone Rossaini
Simone Rossaini

Reputation: 8162

you had two problems, the first in id of navbar, you include a space:

id="myNavbar ">

Must be : id="myNavbar">

the second problem was you include old jquery release(with a bug, and two time?)

body {
  font-family: Arial, serif;
  background: url(https://freenaturestock.s3.us-east-1.amazonaws.com/1602.jpg) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}


/* editing the logo part*/

.logo {
  height: 32px;
  opacity: 1;
}


/*  editing the navbar background colour*/

.navbar-inverse {
  background: rgba(0, 0, 0, 0.5);
}


/* navbar list options editing*/

.nav li {
  color: #fff;
  font-size: 17px;
  margin-right: 15px;
  padding: 10px 15px;
}

.nav li:hover {
  border-bottom: 3px solid #00FFB8;
  padding-bottom: 3px;
}
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  


<body data-spy="scroll" data-target=".navbar" data-offset="30">
  <!-- Create a nav bar-->
  <div class="container-fluid">


    <nav role="navigation" class="navbar nav-tabs navbar-inverse bg-inverse navbar-toggleable navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Toggle navigation</span>
          <!--  <span class="navbar-toggler-icon"></span>-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
          <a class="navbar-brand" href="#">Logo</a>
        </div>
        <div class=" collapse navbar-collapse" id="myNavbar">
          <ul class=" nav navbar-nav navbar-right mylist">
            <li class="nav-item" role="presentation"><a class="nav-link" href="#home"><span class="glyphicon glyphicon-home" style="padding: 8px;"></span>Home</a></li>
            <li class="nav-item" role="presentation" " ><a class="nav-link " href="#about "><span class="glyphicon glyphicon-user " style="padding: 8px " ;></span>About</a>
            </li>
            <li class="nav-item " role="presentation "><a class="nav-link " href="#portfolio "><span class="glyphicon glyphicon-list-alt " style="padding: 8px; "></span>Portfolio</a></li>
            <li class="nav-item " href="#role=" presentation "><a class="nav-link " href="#contact "><span class="glyphicon glyphicon-earphone " style="padding: 8px; "></span>Contact</a></li>
          </ul>
        </div>

      </div>

    </nav>
  </div>
</body>

Upvotes: 1

Related Questions