Good day everyone,
How to make menu Hamburger button animate to X in bootstrap navbar-fixed-top?
<nav class="navbar navbar-default 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="index.html">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I was trying to plug in all possible examples, but I am missing the point. Any ideas?
Many thanks.
You asked for how to animate the transition, I think jQuery would be great for this.
$(".navbar-toggle").click(function () {
$(".open").toggle(500).siblings().toggle(500);
});
.close {
display:none;
}
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<!-- Fixed navbar -->
<nav class="navbar navbar-default 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">
<div class="open">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="close">
X
</div>
</button>
<a class="navbar-brand" href="index.html">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="main.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>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
First of all, you need create additional markup for close button
<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>
<div class="burger>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="close">
x
</div>
</button>
So, after that you need to update your css:
.navbar-toggle .burger{
display: none;
}
.navbar-toggle .close{
display: block;
}
.navbar-toggle.collapsed .burger{
display: block;
}
.navbar-toggle.collapsed .close{
display: none;
}
P.S. also you can easily add animations between default and .collapsed classes
JSFiddle example
Related
I'm a first-time coder and know next to nothing. I'm trying to learn html, css, and js online. I'm trying to create a a responsive site where the navbar menu collapses on smaller resolutions. As of now the menu icon gets highlighted in white when I click on it but doesn't expand to show the items.
I'm using bootstrap 3.3.6 and jquery 2.1.4 (I know it's old but the course I'm learning from is using these)
Thanks in advance!!
(PS: Ignore the content, names etc, I'm just trying to keep it interesting for myself)
<!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>Gorilla Sports</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style_ch.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght#0,500;1,500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg" >
<div id="logo-img" ></div>
</a>
<div class="navbar-brand">
<h1>Gorilla Sports</h1>
<p>
<img src="Images/gorilla_small.jpg" alt="Gorilla">
<span>Gorilla</span>
</p>
</div>
<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:+91-9910673649">
<span>+91-9910673649</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
https://jsfiddle.net/fjg1c5bk/ your collepse menu is working. Maybe your bootsrap libraries is not correct. Can u change them with belows and try again
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
I'm trying to create a navbar using bootstrap that collapses at a certain viewport width. Now, what I'd like to see is that if the navbar is collapsed the navbar-brand disappears and the current active nav item (e.g 'Home', 'About' etc) will be visible on the left, thus enabling the visitor to see at which page they are.
I'm a total bootstrap noob, I had sort of expected to see a css class to be added when the navbar is collapsed/expanded but it doesn't work that way.
<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">
<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-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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body></html>
Not exactly "out of the box", but a little CSS will work with Bootstrap 4 (no jquery or dup markup)...
https://www.codeply.com/go/5T4icATKjl
This overrides the navbar collapse behavior to use visibility instead of display. This way we can control display of the active nav-item.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.navbar .collapse {
visibility: hidden;
display: block;
}
.navbar .collapse.show {
visibility: visible;
}
#media (max-width: 767px) {
.navbar-nav .nav-link.active {
visibility: visible;
}
.collapsing {
transition: all 0.35s ease;
height: 40px !important;
}
.collapse:not(.show) .navbar-nav .nav-item:not(.active) {
display: none;
}
}
#media (min-width: 768px) {
.navbar .collapse .navbar-nav .nav-item {
visibility: visible;
}
}
</style>
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<div class="container">
<div class="collapse" id="navbar1">
<div class="navbar-nav flex-md-row">
<a class="nav-item navbar-brand" href="#">Project name</a>
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link active" href="#">Contact</a>
</div>
</div>
<button class="navbar-toggler align-self-start" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</body>
Notice the #media queries go along with the navbar-expand-md breakpoint of 768px. You can change that to use a diffferent breakpoint if needed.
navbar-expand-sm - 576px
navbar-expand-lg - 992px
navbar-expand-xl - 1200px
There is another solution using duplicate navbar-nav links, but that would require extra markup and I think the CSS only solution above is cleaner.
Have a try of this solution. Although this needs to be advanced to make able nav menu links be clickable.
<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">
<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-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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$ = window.jQuery
$(document).ready(function(){
$('.navbar-brand').attr('data-brand',$('.navbar-brand').text())
var txtMenu = $('#navbar ul.navbar-nav .active').text();
$('.navbar-brand').text(txtMenu)
$('nav.navbar').on('hide.bs.collapse', function(){
var txtM = $('#navbar ul.navbar-nav .active').text();
$('.navbar-brand').text(txtM)
})
$('nav.navbar').on('show.bs.collapse', function(){
var txtB = $('.navbar-brand').attr('data-brand');
$('.navbar-brand').text(txtB)
})
})
</script>
</body></html>
Not available directly in bootstrap but you can write a small Javascript code here:
function displayActiveMenu() {
if ($(window).width() >= 768) {
// do nothing if we are not collapsed
return;
}
var element = $('li.active', '#navbar').clone();
$('#active-navbar').html(element);
}
displayActiveMenu(); // for the first time
$(window).on('resize', displayActiveMenu);
#media (max-width: 767px) {
#active-navbar {
float: right;
margin: 0;
}
#active-navbar>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
<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">
<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-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>
<!-- this is the new element -->
<ul class="nav navbar-nav visible-xs" id="active-navbar">
</ul>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
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 have this problem that my navbar toggle is not working, any idea what I do wrong? I did include the JavaScript and used the code from the Bootstrap example.
<html>
<head>
<title>NavBarTest</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Poiret+One" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar">
<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" id="mainNavBar">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
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"