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>
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>
