CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
user7913385
user7913385

Reputation:

Bootstrap small window navbar dropdown not working

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

This is the dropdown menu that doesn't work properly on the navbar. PS- Its red bordered. 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>

Upvotes: 1

Views: 1400

Answers (1)

LKG
LKG

Reputation: 4192

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>

Upvotes: 2

Related Questions