Bootstrap small window navbar dropdown not working
Question
I'm trying to develop my first website with bootstrap, so I'm quite new to it. I used the inverse navbar and I noticed that when I get my browser's window smaller the right side of the navbar compiles on a dropdown menu that isn't working. It doesn't drop down the menu.
This is how the window is normally
This is the dropdown menu that doesn't work properly on the navbar. PS- Its red bordered.
Here's my HTML:
body { margin: 0; } .jumbotron{ align-items:center; display:flex; background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg'); background-size:cover; height:450px; color:white; height: 50vh; } * { box-sizing: border-box; } .columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } .price .header { background-color: #2D2727; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #eee; font-size: 20px; } .button { background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 600px) { .columns { width: 100%; } }
<!DOCKTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>WebHosting</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="main.css" type="text/css"> </head> <body> <!--NavBar--> <div class="row"> <div class="col-lg-8"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">WebHosting</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="contactos.html">Contactos</a></li> <li><a href="preços.html">Preços</a></li> </ul> </div> </div> </nav> </div> </div><!--NavBar END--> <section class="jumbotron"> <div class="container"> <div class="row text-center"> <h1>WebHosting</h1> <p>Host your WebSite now!!</p> <p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p> </div> </div> </section> <div class="columns"> <ul class="price"> <li class="header">Host</li> <li class="grey">Free</li> <li>Sem criação de WebSite</li> <li>Sem Dominio</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Host + WebSite</li> <li class="grey">€ 9.99</li> <li>Criação do WebSite</li> <li>Sem Dominio</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Host + WebSite + Dominio</li> <li class="grey">€ 9.99 / year</li> <li>Criação do WebSite</li> <li>Dominio incluido</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> </body> </html>
1 answers
solution1
3 ACCPTED 2017-06-21 08:21:23
Use in head section in given order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
body { margin: 0; } .jumbotron { align-items: center; display: flex; background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg'); background-size: cover; height: 450px; color: white; height: 50vh; } * { box-sizing: border-box; } .columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2) } .price .header { background-color: #2D2727; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #eee; font-size: 20px; } .button { background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 600px) { .columns { width: 100%; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <div class="row"> <div class="col-lg-8"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">WebHosting</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="contactos.html">Contactos</a></li> <li><a href="preços.html">Preços</a></li> </ul> </div> </div> </nav> </div> </div> <!--NavBar END--> <section class="jumbotron"> <div class="container"> <div class="row text-center"> <h1>WebHosting</h1> <p>Host your WebSite now!!</p> <p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p> </div> </div> </section> <div class="columns"> <ul class="price"> <li class="header">Host</li> <li class="grey">Free</li> <li>Sem criação de WebSite</li> <li>Sem Dominio</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Host + WebSite</li> <li class="grey">€ 9.99</li> <li>Criação do WebSite</li> <li>Sem Dominio</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Host + WebSite + Dominio</li> <li class="grey">€ 9.99 / year</li> <li>Criação do WebSite</li> <li>Dominio incluido</li> <li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li> </ul> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap dropdown in navbar not working
Dropdown Navbar in Bootstrap not working
Bootstrap navbar dropdown menu not working
Bootstrap navbar dropdown and burger not working
Bootstrap navbar dropdown not working in mobile
Bootstrap Navbar dropdown not working Rails
Navbar dropdown (collapse) is not working in Bootstrap 5
bootstrap navbar toogler not working on small screen
My Bootstrap fixed-top navbar won't show all dropdown items when viewing in a small window or on a mobile device
Bootstrap Navbar Dropdown Not Working in Browser, Codepen okay
Related Tags