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
Related
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>
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"
In Safari the sign in button jumps down on it's own line. I haven't tried firefox, but it works fine on chrome. I have no other code other than this html. Any insight would be greatly appreciated!
Also I'm using safari 9.0.3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Andrew Timosca</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- My CSS file -->
<link rel="stylesheet" href="css/main.css"/>
<!-- Google Fonts -->
<!-- Makes this site work on mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">LOGO</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>Home</li>
<li>About</li>
<li>Archive</li>
<li>Contact</li>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Splash Content -->
<!-- Latest Episode -->
<!-- Footer -->
<!-- Jquery -->
<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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Your li elements are floated left while your button has display: inline-block. When you mix floats and inline content the browser decides what to do based on its text layout metrics and different browsers may make different decisions.
If you want all of the elements on the same line, make them all floats or all inline-blocks and ensure that there's enough space for them on the same line. If you choose the inline-block approach you can also add white-space: nowrap to the containing ul element to prevent wrapping when the page is narrow.
I had the exact same issue - including a button in the navbar list made it wrap to a second line in both Safari and Windows Edge. #Stephen-Nelson's answer clued me into what was wrong. The issue indeed was that the other li's in the list (which contain links), all had float: left.
This behavior was automatically added by Bootstrap. However, the button did not have that float property, because Bootstrap looks for the <li> to add the float behavior. So no need to change anything about the other items in the list. Wrapping the button in an <li> let Bootstrap apply the same behavior.
Here's what my code looks like now:
<ul class="nav navbar-nav navbar-right">
<li>Learn more</li>
<li>Pricing</li>
<li>Contact</li>
<li role="separator" class="divider"></li>
<li><button type="button" class="btn btn-primary navbar-btn" ng-click="signin()">Sign in</button></li>
</ul>
Bootstrap is made to wrap when your menu items exceed the width available. Do a Ctrl- to resize your page a wee bit smaller and things should re-shuffle themselves to fit. This is likely an issue with your screen display and with Safari setting things to a certain zoom level which is different to the zoom level in the other browsers.
I'm a noob in this kind of thing, I don't understand what thing I'm doing wrong. I don't get a button nor a navigation bar; all I get is a small button that doesn't do absolutely nothing and is not with the color that I put in my CSS. My navigation bar doesn't appear neither. Btw, is bootstrap good or is there a program better?
My code is like this:
<!DOCTYPE html>
<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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div 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=".navbar-collapse">
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Try the following code:
<!DOCTYPE html>
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#">SITE NAME/LOGO</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HEADING1<span class="sr-only">(current)</span></li>
<li>HEADING2</li>
<li>HEADING3</li>
<li class="dropdown">
HEADING4<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>SomeThing</li>
<li>SomeThingElse</li>
<li>SomeThingElse</li>
<li class="divider"></li>
<li>SomeThingElse</li>
<li class="divider"></li>
<li>SomeThingElse</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>SomeThingElse</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
It is also better practice to use bootstrap from its online source. It makes your site faster because other sites request the same resource and it so it is stored in browsers cache.
Bootstrap is a good tool and can make building websites alot faster and easier.
Try to edit this if you are using Bootstrap 3. And Yes it is great ;)
You just insert the start of Bootstrap Navigation. Use all of it.
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
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.