I know this has been asked thousands of time and I've been looking at some of the similar questions for about and an hour now.
I can't figure out whats the problem in my code and no matter what solution I try it doesn't works.
Here is the navbar snippet in my project (derived from the bootstrap docs):
<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>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target"#rtNavbar" 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="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I'm using bootstrap 3 for a express node.js app. And I'm using hogan templating if that matters.
<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>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" 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="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
Just Make This Change In The data-target.
https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a
Its because Bootstrap is not compatible with jQuery 3. Use jQuery 2, or embed jQuery Migrate after jQuery.
change your data target its wrong try like this
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">
If doesn't thats because of Bootstrap 3 is not compatible with jQuery 3.0 and above at the moment. So latest version of jQuery that can be used with Bootstrap 3 is 2.2.4.
Part of the problem might be the way (and where) the JS and jQuery is embedded in your code. I noticed - at least for the JS - that there isn't a closing </script> tag. I think your problem may be as simple as not having these tags in the right place and not being closed properly.
I've used the following <script> additions in the <head> and had the collapse button work, so you may want to try these within the <head>. It may even be as simple as not including these two scripts right below the Bootstrap CSS link. It should look something like this (for Bootstrap 3):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
You've also got a problem with the data-target in your <button> tag. Try using something like data-target""#myNavbar" instead.
The other thing is that you have a redundant navbar-collapse for the second <div> pertaining to the right-aligned elements in your bar. This could muddy the waters and cause problems. Otherwise, the rest of the code materials look good. Just try declaring the above code in the <head>. Good luck!
Related
I am using bootstrap navbar and I have a collapsible navbar. But I am facing a strange problem, whenever I open my site i.e mobile phone or tablet (actually for which devices I need the collapsible navbar), the button appears but I'm not able to open the navbar. This should not happen. If I click on the navbar button (three line button) nothing happens.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span>
<br class="hidden-xs">Menu
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span>
<br class="hidden-xs">About
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span>
<br class="hidden-xs">Awards
</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span>
</a>
<div>* We Deliver</div>
</li>
</ul>
</div>
Please check your jQuery version. I hope this will fix your problem. Here is demo link: https://codepen.io/shamimipt/pen/abLKRrx
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>```
My nav dropdown button for smaller screens (phones and tablets) is not working. I have included the JS files but its still not working. Can anyone help determine why this is not wanting to connect with my js files.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.mini.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Header -->
<header>
<nav class="navbar navbar-default navbar-fixed">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">AffAttraction</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>Blog</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<form class="navbar-form navbar-right">
<input type="email" name="email" class="form-control" placeholder="Email" required="">
<input type="password" name="password" class="form-control" placeholder="Password" required="">
<button type="submit" class="btn btn-green">Login <span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
</div>
</nav>
</header>
<!-- Header -- >
<!-- Showcase -->
<div id="showcase">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1><span class="highlight">Performance</span> Based Marketing</h1>
<p>Do you have traffic? Let us help you monetize and profit from your websites, apps, games, blogs, and more!</p>
</div>
</div>
</div>
</div>
<!-- Showcase -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.mini.js"></script>
</body>
</html>
I have included it at the top under my CSS links if you think that could be a problem. I also tried putting it under the body tag and the html tag. I am lost on what to do. Those files do exist!
I tried to run your code, replacing your local bootstrap stylesheets with the CDN version. When I loaded it, I crashed because jQuery was missing. After adding jQuery inside the head, it worked:
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
If you want to connect the Bootstrap CSS and JS files on your HTML, you can easily do that with Bootstrap CDN.
Add this this to your <head> as Bootstrap Stylesheet
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
And this to your <body> as Bootstrap JavaScript link
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
Also add JQuery for Bootstrap to work properly
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
I'm currently making a website that utilizes the Bootstrap Navbar. Everything seems to be working fine when making the window smaller, the triple bars show. When I try to click on it though, it seems it doesn't want to drop down like it should.
I've included this in my code:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Here's what I used for the Navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<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="#">Zachary Vincze</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Me</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
</div>
</div>
</nav>
If anyone could help, that'd be awesome. Thanks in advanced!
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
JQuery must be included first, if this doesn't fix you issue let me know and I will adjust my answer :)
If you open your console/debugger window in your browser you'll see the following error:
Uncaught Error: Bootstrap's JavaScript requires jQuery
You need to include jQuery before bootstrap for this functionality to work.
I'm using Twitter Bootstrap 3. I'm writing a simple navbar but is not responsive: if I zoom in the browser the Toggle navigation doesn't work. You can copy and paste this html file and zooming with Chrome the toogle doesn't work.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="/">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About</li>
<li>Blog</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
Can you help me?
You are forgetting to include Jquery! Add this in your head tags.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
I zoom in the browser and the Toggle navigation worked. May be some other problem you are facing.
DEMO
I've just started using Twitter Bootstrap 3.0, I've been reading the documentation and I'm trying to create a responsive navigation bar, my code is the same structure as the example in the documentation but it doesn't seem to be working for some reason.
Below is the HTML code I'm using, I'm just using the default CSS and Javascript files.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Efar Communication Services</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- For screen readers and mobiles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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">Efar</a>
<p class="navbar-text">Business Infrastructure Solutions</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Products</li>
<li>Client Area</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div> <!-- End of container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The problem was that where I had <script src="//code.jquery.com/jquery.js"></script>, it turns out that the site wasn't responding and so the page couldn't use jquery, which it needs to work. So I downloaded a local copy of jquery and changed it to <script src="js/jquery.js"></script>. Now it's working fine