Don't know what I am missing from my code. When I shrink the size the 3 bars show up but when I click on them they don't toggle the menu.
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#main-nav">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collect nav links, forms, and other content into div for toggle -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
here is the code on jsfiddle: http://jsfiddle.net/5SBqQ/
Bootstrap requires jQuery. Adding:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
before you add bootstrap should fix the issue.
http://jsfiddle.net/4LWQv/2/ (Removed the script and link tags for jsfiddle)
Related
I am currently building a mobile collapsable navbar that when the screen is shrunk the items along the navbar disappear and then appears a hamburger button with a select dropdown of the formerly hidden items. I have been following this previously asked questions, How to add hamburger menu in bootstrap, but I do not see where I went wrong as once the text is hidden and the hamburger button appears I do not have a dropdown menu to select from
<html>
<head>
<title> Bubble</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<link rel="stylesheet" href="/blog/main/main.css">
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<i class="large line chart icon"></i>Dr. Denver Housing Bubble
</div>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="nav navbar-nav">
<li><a hef="#">About</a></li>
<li><a hef="#">Blogs</a></li>
<li><a hef="#">Donate</a></li>
<li><a hef="#">Contact</a></li>
<li>Login</li>
<li>Sign Up</li>
<li> Signed In As Ralph</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
I add the following lines of code to my applicatioin to enable the drop down.
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I am using the exact code suggested by Bootstrap:-
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
Here is the JSFiddle.
Please note that I did use Bootstrap CSS and JS as external resources in my JSFiddle.
You need to ether use the v4 markup for your current version of bootstrap or to use v3 for your current markup
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Try now it is working for me your are using Bootstrap v4.0.0-beta.2 try to use 3.3.7
.bs-example{
margin: 20px;
}
<!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">
<title>Example of Bootstrap 3 Static Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
I am using the bootstrap navbar-toggle and targeting the class navbar-collapsed but my navbar is not automatically closing on mobile:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<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 scrollTo" href="#intro"><img id="bg-img" src="./img/hn-logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Products
</li>
<li>Learn
</li>
<li>Lab Testing
</li>
<li>Partners
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
Try this, add this Jquery in script tag
<script type="text/javascript">
$('.nav a').on('click', function () {
$('.btn-navbar').click(); //bootstrap 2.x
$('.navbar-toggle').click() //bootstrap 3.x
});
</script>
Include jquery through CDN or from your own source
jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
and then include bootstrap js CDN
Bootstrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I am currently building a website using Bootstrap and have gotten stock on the implementation part. I've checked and it appears I've installed Bootstrap and Jquery correctly, but when I go to toggle the dropdown menu on a mobile sized screen nothing happens. I understand this has been asked before and have tried to resolve my issue with those solutions but nothing helped.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!--- Brand and toggle grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="./index.html">Test</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" datatarget=".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>
<!-- links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- Body content below -->
<div class="container">
<div class="row">
<div class="col-md-4" id="#">
<h1> Test</h1>
</div>
</div>
</div>
<!-- Jquery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
</body>
</html>
Try this:
<nav class='navbar-default navbar' >
<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="#">Brand</a>
</div>
</nav>
All you need to do is add a dash to the datatarget=".navbar-collapse" it should look like data-target=".navbar-collapse"
I am trying to make a collapsible navbar with Bootstrap but no matter how many times I try and how many times I check the way it's done I can't manage to make clicking the button expand the navbar.
This is my HTML:
<section id="upper-section">
<div class="container mini-container">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-target="#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>
<a href="index.html" class="navbar-brand">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<div id="nav" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Projects
</li>
<li>
Professors
</li>
<li>
Contact
</li>
<li>
Administration
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
And I made sure jquery is being loaded before bootstrap.js:
<script src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.js"></script>
I don't know what's wrong, why pressing the button isn't expanding the navbar?
Edit: fiddle
It's missing the data-toggle on your button
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
I had the same problem here is what I did. I grabbed the 3 js cdn (jquery, popper.js & js) from the boostrap website here:
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Put those links in the head section of the html. I have put the bootstrap css cdn below those ones.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Please follow the website link for the latest versions.
You need use a dropdown class in an li element, and a dropdown-menu in a ul element:
<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>
<a class="navbar-brand" href="#">Directorio MINSAL</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Exposiciones<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Exposiciones 1</li>
<li>Exposiciones 2</li>
</ul>
</li>
<li class="dropdown">
Asambleas<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Asambleas 1</li>
<li>Asambleas 2</li>
</ul>
<li>Estudiantes</li>
<li>Maestros</li>
<li>Formación pedágogica</li>
<li class="active">Item Activo</li>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Cerrar Sesión</li>
</ul>
</div>
</div>
</div>
... And F12. It's very useful in these cases.
Recently, I also faced the same situation and I found that the targeted ID (i.e id="nav") had a space in its name...Just like below
<div id="nav " class="navbar-collapse collapse navbar-right">
So, after removing this extra white space it worked for me.
I know my answer is not related to the posted question...I wrote it if in case any reader may find it useful.