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 piled and minified CSS -->
<link rel="stylesheet" href=".3.0/css/bootstrap.min.css">
<!--font awesome-->
<link href="//maxcdn.bootstrapcdn/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--fonts-->
<link href='+Sans:300italic,400italic,600italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
<!-- Optional theme -->
<link rel="stylesheet" href='.3.0/css/bootstrap-theme.min.css'>
<!-- Latest piled and minified JavaScript -->
<script src=".11.1/jquery.min.js"></script>
<script src=".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;
}
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 piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.0/css/bootstrap.min.css">
<!--font awesome-->
<link href="//maxcdn.bootstrapcdn./font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--fonts-->
<link href='http://fonts.googleapis./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./bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<!-- Latest piled and minified JavaScript -->
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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;
}
- What are you trying to collapse? – Bernhard Döbler Commented Nov 12, 2014 at 17:50
2 Answers
Reset to default 3You 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">
You have 2 issues.
- You need to remove the parent tag
<header>of the collapse<button>(it should not be there). - Then you need to change the
data-targetattribute (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>