CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapnavbar
Andrea
Andrea

Reputation: 23

Bootstrap 3 nav collapse not working

I have referred to a number of articles and I cannot figure out why my collapse function (and any other js i insert) is not working. I have included both .js and jquery links in my header. I have also scanned and scanned my code. I will put in my code for the nav and if needed provide a link to the whole codepen.

HTML

<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>Sume</title>

    <!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!--font awesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <!--fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
<!-- Optional theme -->
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>     
  </head>

  <body>    
      <!--nav-->
         <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
        <div class="container">
          <header class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">
                <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="#header">Sume</a>
          </header>
          <div class="collapse navbar-collapse pull-right" id="nav-collapse">
             <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#intro">About</a></li>
              <li><a href="#exp">Experience</a></li>
               <li><a href="#skl">Technical Skills</a></li>
              <li><a href="#img-port">Image Portfolio</a></li>
               <li><a href="#contact">Contact</a></li>             
            </ul>
          </div>
        </div>
      </nav>

Css

html, body {
  height:100%;
  width:100%;
}
* {
  font-family: 'Open Sans', sans-serif;
}
a{
  text-decoration:none;
}
.navbar-nav a {
  color: white;
  font-size:125%;

}
.nav a:hover {
  background: transparent !important;
  color:white;
  border-bottom:3px solid white !important;
}
.nav a:focus {
  color:gray;
}
.navbar .navbar-header .navbar-brand {
    color: white;
} 
.navbar {
  background-color:rgb(37,96,155);
  padding-bottom:-1% !important;
}
.icon-bar {
  background-color:white;
}
.navbar .navbar-brand {
  background-color:rgb(37,96,155);
  color:white;
  border: 1px solid white;
  font-weight:lighter;
    -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.navbar .navbar-brand:hover {
  border-bottom: 3px solid white;
  border-top:none;
  border-left:none;
  border-right:none;
  font-weight: normal;
  -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

Upvotes: 0

Views: 7818

Answers (2)

ianaya89
ianaya89

Reputation: 4233

You have 2 issues.

  1. You need to remove the parent tag <header> of the collapse <button> (it should not be there).
  2. Then you need to change the data-target attribute (of your <button>) to refer to your collapsable <div>.

HTML

 <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
            <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="#header">Sume</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse">
          <ul class="nav navbar-nav navbar-right">
           <li class="active"><a href="#intro">About</a></li>
           <li><a href="#exp">Experience</a></li>
           <li><a href="#skl">Technical Skills</a></li>
           <li><a href="#img-port">Image Portfolio</a></li>
           <li><a href="#contact">Contact</a></li>             
         </ul>
       </div>
     </div>
    </nav>

Upvotes: 0

Aibrean
Aibrean

Reputation: 6412

You have a typo.

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

Your data-target should match the DIV ID of the list (<div class="collapse navbar-collapse pull-right" id="nav-collapse">).

This should do the trick:

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

Upvotes: 3

Related Questions