ArslArsl ArslArsl - 4 months ago 18
Javascript Question

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

Answer

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

Comments