I'm using bootstrap stylesheets.
The following code is for my navigation panel. This works fine on my desktop browser but when I reduce the browser size or test on a mobile device, the burger menu appears but does not expand to display the contents of the navigation as expected.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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 color-me" href="#home">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- container -->
</nav>
Am I missing something in my HTML? I don't understand where the problem is!
please include this line and will work .
Note: Include in this order - include Jquery before Bootstrap.Bootstrap need Jquery to be loaded before Bootstrap.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
you are missing the javascript library so that the event isnot responded ,
Seem that you missed include bootstrap js file. Please check https://getbootstrap.com/docs/3.3/getting-started/
I guess using the bootstrap.min.js for the issues won't solve the problem until and unless you do not include the jquery in bootstrap#3
please also include the following link or get it through dist folder of javascript
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
Related
I am trying to design a webpage using bootstrap. But my navbar does not collapse.
All the contents of span box are supposed to be inside the created button.But they appear on the header itself.
What could be the problem?
Here is the code:
<html lang="en">
<head>
<meta charset="utf.8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<!--navbar navbar-inverse:black bar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="mynavbar">
<div class="container">
<div class="navbar-header">
<!--button data toogle set to collapse for enabling size variations ex.mobile-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<!--span box list of items inside the button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Sample
</div><!--Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Feedback
<li>Gallery
<li>Contact
</ul>
</div>
</div><!--Container-->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
It's not data-toogle, it's data-toggle.
Fix the typo:
data-toogle="collapse"
I have created a nav bar, and styled it my way. However, when I make the window small, and click in the right corner on the button, the nav bar extends all the options and that's it. Once I click on one of the options, it will not close i.e. it will not collapse back. What am I doing wrong? Ive been exploring with this for a while now and cannot see the mistake.
Here is my code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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>
<!-- use a responsive image option so this logo looks good on devices - recommend using something like retina.js -->
<a class="navbar-brand" href="#/">Test</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Us
</li>
<li>What We Do
</li>
<li>Examples
</li>
<li>Testimonials
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>
In my index.html, I link to the header.html which works fine, and the following styles:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
And the javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Clicking the links doesn't automatically collapse/toggle the Bootstrap navbar. This is by design.
If you want them to close after click you can add this to the links..
data-toggle="collapse" data-target=".navbar-collapse.in"
Demo: http://www.codeply.com/go/Ia4LLB8Yyp
You could also use jQuery like this..
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
I am trying to have a bootstrap navigation like this one
But this is in a ROR application and it keeps stacking no matter what I do.
So I decided to create a simple HTML file to see what I'm missing here.
This is the code:
<!DOCTYPE html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</body>
</html>
But if you copy and paste that code, all you'll see is everything stacking instead of being a horizontal menu like in the link above.
What ON EARTH am I doing wrong here?!?!??!?!?!
EDIT
The navigation above is totally ripped off from bootstrap page as linked above.
You're using the Bootstrap 2.3.2 docs but including the 3.3.4 files and then you're trying to make a 2.3.2 navbar (which does not work).
Using Bootstrap 3.3.4 docs, your navbar code should look like this:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>
Otherwise, if you were intending to use the 2.3.2 docs you need to fix your 3 included files...
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
You are using bootstrap 3.3.4 but referring to the docs of bootstrap 2.3.2. This is the updated documentation
The bootstrap navbar collapses just fine and opens fine but when you try to close the navbar it fails.
I tried replacing the CSS with an older bootstrap file and the same happens. I tried adding the padding to the body like other threads suggested and nothing comes of it. Anyone have an idea?
<!--scripts-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<!--begin nav-->
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div 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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><img src="img/logo.png"></img></li>
</ul>
<ul class="nav navbar-nav">
<li>NEWS</li>
<li>PHOTOS</li>
<li>SHOP</li>
<li>CONTACT</li>
</ul>
</div><!--/.nav-collapse-->
</div>
</div>
<!--end nav-->
........
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
I'll link to the site so the CSS is viewable. The website is here.
Any help would be appreciated.
Thank you!
You're pulling jQuery into the page in three different places. Twice in the header and once in the footer. Try only one in the footer, just before you pull in Bootstrap script.
try to start learning about Bootstrap. i create little code to create responsive menu, like this
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Application Name
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="JS/bootstrap.js"></script>
</body>
</html>
my question is, why when i try to select menu in small browser, menu does not show ?
can some one tell me why?
thanks
My geuss is that you didn't load jQuery. Place this in your header and see if it works:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Also i suggest to load the bootstrap js file also in the header, just after the jQuery library.
It is most likely because the bootstrap.js script relies on jQuery to work. Try including jQuery before bootstrap.js
Not sure if this helps but I noticed that on the bootstrap site its tells you to link js files in the footer.
I also had wordpress place them in my header as i had to enqueue the scripts in my functions.php file. Once i removed the link to the jquery.js file and bootstrap-min.js in the footer the nav button began to collapse correctly.