Twitter bootstrap hamburger - javascript

I am trying to get my practice web page to show a hamburger menu when on a mobile device, but no matter what I try nothing seems to get it to go that hamburger menu. I have tried to copy the code exactly how it looks on the bootstrap website, but again it's not working. I feel like I may be missing a plug in or using the wrong bootstrap file, the full length of code is detailed below.
Other Contextual Information
I am currently learning how to code through an online course and I have come to the section on twitter bootstrap. It seems the professor is teaching an older version of bootstrap; since none of what he is saying is directly lining up with the bootstrap website.
<!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>Bootstrap 101 Template</title>
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<style>
.box {
background-color:#d3d3d3;
}
</style>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse">
<ul class="nav nav-tabs" role="menu" aria-labelledby="dropdownMenu1">
<li class="active">Home</li>
<li>scout</li>
<li>chill</li>
<li>chill</li>
</ul>
</div>
</div>
</div>
<h1>Hello, world!</h1>
<div class="container-fluid">
<div class="row">
<div class="span6 box">Content</div>
<div class="span6 box">Content</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

I used the template posted on getbootstrap.com. View full page and zoom in to see the burger menu.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- burger icon -->
<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="#">Hello world</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li class="active">Static top <span class="sr-only">(current)</span></li>
<li>Fixed top</li>
</ul>
</div>
</div>
</nav>
I believe that .nav.nav-tabs are used for "in-page" navigation tabs. I've never seen it used in a navbar but I may be wrong. And if your professor is using bootstrap 2, the documentation is located here for your reference. A good way to learn bootstrap is go to the bootstrap components page, right-click on any element you want to learn about and click on inspect element to see the html of the component.

Related

Bootsrap is not being applied on the browser

I'm following a bootstrap tutorial. The bootstrap styles are not being applied in my browser. Also all the required files are in the same folder.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#">SHUBHI KHANDELWAL </a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li class="">WORKS</li>
<li class="">CONTACT</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Do you have error messages in the console?
Did you check the following html structure which need to be followed by bootstrap:
https://getbootstrap.com/docs/4.3/components/navs/
Do you have all the files locally in the correct folder:
css/bootstrap.min.css
js/bootstrap.min.js
Please check the documentation here to correctly include Bootstraps:
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Try Bootstrap CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Dropdown hamburger not working Jquery and JS CDN placement is correct

I am just trying to have the hamburger icon drop down the navbar when the screen is formatted to iphone size but it will not drop down.
I am also pretty sure that the JS and jquery placement is correct.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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">
<link rel="stylesheet" type="text/css" href="Portfolio.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NAVBAR -->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collpase" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COTO
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Team</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
</body>
</html>
According to Bootstrap (https://getbootstrap.com/docs/4.0/components/navbar/):
You have incorrect data-toggle attribute:
data-toggle="collpase" → data-toggle="collapse"
Change the navbar-toggle button's data-target attribute to ID selector instead of class selector:
data-target=".navbar-collapse" → data-target="#navbar"
Add the ID attribute to navbar:
<div class="navbar-collapse collapse" id="navbar">
You had just a little typo at the data-toggle attribute. Also, you must always use ID selectors when you are trying to select a single element. Here is a working example (tested):
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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">
<link rel="stylesheet" type="text/css" href="Portfolio.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NAVBAR -->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COTO
</div>
<div class="navbar-collapse collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Team</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
</body>
</html>

Navbar Collapse is not longer working, despite making no changes to it directly

I have a bootstrap navbar collapse, which until yesterday was working fine. However I downloaded bootstrap and jquery rather than using the cdn and deferred my javascript dependencies and it no longer works.
Here is the code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<script defer type="text/javascript" src="/jquery/jquery-1.12.min.js"></script>
<link defer type="text/javascript" href="/bootstrap/dist/js/bootstrap.min.js">
<script defer type="text/javascript" src="/lightgallery/dist/js/lightgallery.min.js"></script>
</head>
<body style="width: 100%">
<!-- <script src="test.js"></script> -->
<script defer type="text/javascript" src="/js/app.min.js"></script>
<script defer type="text/javascript" src="/js/homepage.min.js"></script>
<nav id="navbar" class="navbar navbar-default col-md-12 col-xs-12" style="box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);">
<div class="container-fluid col-md-6 col-md-offset-3 col-xs-12">
<!-- 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="#" style="padding: 0;">
<img src="/img/logo.png" alt="" style="height: 100%; width: auto;">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
<li><a class="fa">|</a></li>
<li><a class="fa fa-facebook" href="http://www.facebook.com/"></a></li>
<li><a class="fa fa-instagram" href="http://www.instagram.com/"></a></li>
<li><a class="fa fa-twitter" href="http://www.twitter.com/"></a></li>
</ul>
</div>
</div>
</nav>

Bootstrap Dropdown Not Un-Collapsing Menu

I've looked everywhere, but can't seem to find the answer to my solution. I am following a tutorial on how to make a navbar for my website and I am trying to make it mobile friendly as well. I want the navbar to display a button that un-collapses the menu on a smaller device. But even after I added jQuery, it still doesn't open the menu.
Here is my code that I have, hopefully it is just a simple fix that I am overlooking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/main.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Test
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home </li>
<li>About </li>
<li>Contact </li>
<!-- Drop Down Menu -->
<li class="dropdown">
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>About </li>
<li>Contact </li>
</ul>
</li>
</ul>
<!-- Right Align -->
<ul class="nav navbar-nav navbar-right">
<li>Logout </li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Thanks for the help in advance!
only update data-target="mainNavbar" Replace To data-target="#mainNavbar"
Update one Line only
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">
<meta charset="UTF-8">
<title>Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/main.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Test
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="nav navbar-nav">
<li class="active">Home </li>
<li>About </li>
<li>Contact </li>
<!-- Drop Down Menu -->
<li class="dropdown">
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>About </li>
<li>Contact </li>
</ul>
</li>
</ul>
<!-- Right Align -->
<ul class="nav navbar-nav navbar-right">
<li>Logout </li>
</ul>
</div>
</div>
</nav>
there is a mistake in your button. you forgot to place the # in your data-target attribute.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

Responsive Menu Using Bootstrap

Can Any one help me for the menu creating using Bootstrap CSS
every tutorial of bootstrap menu does not full fill my requirement
so please can any one tell me how to create Responsive menu
Image contains two images 1 for normal browser and another image is for mobile
I have tried the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Static Navbar Extended</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script>
</script>
</head>
<body>
<div class="bs-example">
<nav role="navigation" 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, forms, 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>Login</li>
</ul>
<!-- <ul class="nav navbar-nav">
<li>Login</li>
</ul> -->
</div>
</nav>
</div>
</body>
</html>
Have you checked these examples?
Bootstrap navbar
Bootstrap navbar-static-top/
Bootstrap navbar-fixed-top/
do exactly what you need
in addition, this utility allows you to create the bootstrap navbar
UPDATE
JSFIDDLE
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="test">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#link1" style="display:none;" id="link">item 1</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</div>
$(document).ready(function() {
//control for the creation
if($(window).width() < 767){
$("#link").show();
}
});
$(document).load($(window).bind("resize", do_menu));
function do_menu(){
if($(window).width() < 767){
$("#link").show();
}else{
$("#link").hide();
}
}
I've modified the twitter bootstrap HTML code, i believe the below solution is pretty much close what you expect
<!-- Static navbar -->
<div 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=".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 hidden-lg" href="#" data-toggle="dropdown">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">1 First Topic</li>
<li>1 First Topic</li>
<li>1 First Topic</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
I got my solution :
following is the code i required:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Static Navbar Extended</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script>
$(document).ready(function(){
$(window).resize(function(){
console.log($(window).width());
if($(window).width()<767)
{
$(".navbar-brand").html($(".active>a").text());
}
else
{
$(".navbar-brand").html("");
}
});
$("ul>li").click(function(){
//alert($(this).find("a").text());
$(".active").removeClass("active");
$(this).addClass("active");
if($("#navbarCollapse").hasClass("in"))
{
$("#navbarCollapse").removeClass("in")
$("#navbarCollapse").addClass("collapse")
}
if($(window).width()<767)
{
$(".navbar-brand").html($(".active>a").text());
}
else
{
$(".navbar-brand").html("");
}
});
});
</script>
</head>
<body>
<div class="bs-example">
<nav role="navigation" 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>
</div>
<!-- Collection of nav links, forms, 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>Login</li>
</ul>
</div>
</nav>
</div>
</body>
</html>

Categories