CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
kurumkan
kurumkan

Reputation: 2725

Bootstrap navbar-fixed-top doens't open on click

I am playing with Bootsrap. And here is my html

</!DOCTYPE html>
<html>
<head>
    <title>JQuery</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif|Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>

 <nav class="navbar navbar-inverse navbar-fixed-top">  
    <div class="container"> 
        <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="#" id="logo">MyPortfolio</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav  navbar-right" id="menu">
              <li class="active text-uppercase"><a href="#">services</a></li>
              <li  class="text-uppercase"><a href="#">portfolio</a></li>
              <li  class="text-uppercase"><a href="#">about</a></li>
              <li  class="text-uppercase"><a href="#">team</a></li>
              <li  class="text-uppercase"><a href="#">contact</a></li>
            </ul>
        </div>      
    </div>
    </nav>

<div id="top">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 intro-pre-heading">Welcome To My Website!</div>
        </div>

        <div class="row">
            <div class="col-xs-12 intro-heading">it's nice to meet you</div>
        </div>
        <div class="row">
            <div class="col-xs-12 text-center"><a href="#" class="btn btn-lg btn-warning">TELL ME MORE</a></div>
        </div>
    </div>
</div>

</body>
</html>

and css:

 *{
    color: white;
    font-family: 'Montserrat', sans-serif;
}
#logo{
    color:#FED136;
    font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
    font-size: 2em;
    margin: 10px 5px 10px 30px;
}
#menu{
    margin: 10px 30px 10px 0;   
}
#menu li{
    margin:0 15px;
}
div#top{
    margin-top: 70px;
    background-color: black;
    background: url('http://blackrockdigital.github.io/startbootstrap-agency/img/header-bg.jpg') no-repeat center center fixed; 
     -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: 100% 100%;
      height: 600px;
}
.intro-heading{
    font-family: 'Montserrat', sans-serif;  
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: 70px;
}
.intro-pre-heading{
    margin-top: 110px;
    font-family: 'Droid Serif', serif;
    font-style: italic;
    text-align: center;
    font-size: 40px;
}

.btn-warning {
    font-size:40px!important;
    margin-top: 60px;
    background-color: #FED136 !important;  
    border-background:#FED136;
}

But the navbar toggle button doesn't open. I can't figure out what's wrong in the code. I saw similar questions in here and tried different approaches, but none of them solved my issue

Upvotes: 0

Views: 87

Answers (1)

Faiz
Faiz

Reputation: 1019

Your mistake is you forgot to include bootstrap js file. Also make sure jquery js is loaded. Below is the full working code.

<!DOCTYPE html>
<html>
<head>
    <title>JQuery</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif|Montserrat' rel='stylesheet' type='text/css'>
    <style>
     *{
    color: white;
    font-family: 'Montserrat', sans-serif;
      }
      #logo{
      color:#FED136;
      font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
      font-size: 2em;
      margin: 10px 5px 10px 30px;
      }
      #menu{
      margin: 10px 30px 10px 0;   
      }
      #menu li{
      margin:0 15px;
      }
      div#top{
      margin-top: 70px;
      background-color: black;
      background: url('http://blackrockdigital.github.io/startbootstrap-agency/img/header-bg.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: 100% 100%;
        height: 600px;
      }
      .intro-heading{
      font-family: 'Montserrat', sans-serif;  
      text-transform: uppercase;
      text-align: center;
      font-weight: bold;
      font-size: 70px;
      }
      .intro-pre-heading{
      margin-top: 110px;
      font-family: 'Droid Serif', serif;
      font-style: italic;
      text-align: center;
      font-size: 40px;
      }

      .btn-warning {
      font-size:40px!important;
      margin-top: 60px;
      background-color: #FED136 !important;  
      border-background:#FED136;
      }
    </style>
</head>
<body>

 <nav class="navbar navbar-inverse navbar-fixed-top">  
    <div class="container"> 
        <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="#" id="logo">MyPortfolio</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav  navbar-right" id="menu">
              <li class="active text-uppercase"><a href="#">services</a></li>
              <li  class="text-uppercase"><a href="#">portfolio</a></li>
              <li  class="text-uppercase"><a href="#">about</a></li>
              <li  class="text-uppercase"><a href="#">team</a></li>
              <li  class="text-uppercase"><a href="#">contact</a></li>
            </ul>
        </div>      
    </div>
    </nav>

<div id="top">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 intro-pre-heading">Welcome To My Website!</div>
        </div>

        <div class="row">
            <div class="col-xs-12 intro-heading">it's nice to meet you</div>
        </div>
        <div class="row">
            <div class="col-xs-12 text-center"><a href="#" class="btn btn-lg btn-warning">TELL ME MORE</a></div>
        </div>
    </div>
</div>

</body>
</html

Upvotes: 2

Related Questions