Why at extra small screen size, my collapse button doesn't open when i click on it?

Question

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Oxygen</title> <link href="https://fonts.googleapis.com/css?family=Hind+Siliguri|Mukta" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <nav id="header-nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img src="images/logo.png"> </a> </div> <div class="collapse navbar-collapse" id="myNav"> <ul class="nav navbar-nav navbar-right"> <li ><a href="index.html"> HOME </a></li> <li ><a href="service.html">SERVICE</a></li> <li ><a href="aboutus.html">ABOUT US</a></li> <li ><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="team.html">TEAM</a></li> <li ><a href="features.html">FEATURES</a></li> <li ><a href="blog.html">BLOG</a></li> <li class="active"><a href="contact.html">CONTACT</a></li> </ul> </div> </div> </nav> <div id="main-content-contact" class="container-fluid"> <h2 class="text-center">Contact Us </h2> <div id="brief-overview" class="text-center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere ac ut consequat semper. Varius duis at consectetur lorem. Ipsum a arcu cursus vitae </div> <div class="row"> <div id="user-info" class="col-md-6 col-sm-6 col-xs-6"> <form> <input class="nameEmail nameEmail1" type="text" name="fName" placeholder="Name"> <input class="nameEmail nameEmail2" type="email" name="emailAddress" placeholder="Email Address"> <br> <input type="text" name="Subject" placeholder="Subject"> <br> <input id="enterMessage" type="text" name="Message" placeholder="Enter Your Message"> <br> <input id="submit-colors" type="submit" value="Send Now"> </form> </div> <div id="company-info" class="col-md-6 col-sm-6 col-xs-12"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere </div> <div id="contact-info"> <span class="fas fa-map-marker-alt"></span> Address: 2400 South Avenue A<br> <span class="fas fa-phone fa-rotate-90"></span> Phone: +928 336 2000<br> <span class="fas fa-envelope"></span> Email: support@oxygen.com<br> <span class="fas fa-globe-americas"></span> Website: wwww.sitename.com </div> </div> </div> </div> <footer id="footer-area" class="panel-footer"> <div class="container text-center"> <img src="images/logo.png" alt="the brand photo"> <div id="socail-container"> <div class="fab fa-dribbble"></div> <div class="fab fa-facebook-f"></div> <div class="fab fa-instagram"></div> <div class="fab fa-linkedin-in"></div> <div class="fab fa-tumblr-square"></div> <div class="fab fa-twitter"></div> <div class="fas fa-envelope"></div> </div> </div> </footer> <div id="copyright" class="container-fluid"> <span >&copy; 2019 Oxygen Theme.</span> <span >Designed by Themeum</span> </div> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> </body> </html>

I use bootstrap 3 in my project, and when i zoom out the browser window, the collapse button appears but when i click on it, nothing happens taking into consideration,i'm putting this piece of code at the very end of the body element

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> and you can see the entire html document by clicking on

here ! or you can see it directly at the following

Answer 1

So there are two issues that i found, first being your resources are not linked properly. Please check again your js files are properly put with the same names under the js directory.

Other easier way i would suggest is to use cdn. Use these three cdn

<!-- bootstrap-3 cdn -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>

put these three links in your document's head section in this same order.

The second issue is that in the "data-toggle" attribute of your toggle button there is a space before the id of the collapsible division. Remove that space.

<button type="button" class="navbar-toggle collapsed" data-toggle="    collapse" data-target="#myNav">

Here is the working pen of your code.

Why at extra small screen size, my collapse button doesn't open when i click on it?

Question

1 answers

solution1
1 ACCPTED 2019-05-12 17:59:09

Why at extra small screen size, my collapse button doesn't open when i click on it?

Question

1 answers

solution1 1 ACCPTED 2019-05-12 17:59:09

solution1
1 ACCPTED 2019-05-12 17:59:09