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>
Related
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>
I've been using Bootstrap navbars for five years now. This is the first time I haven't been able to make it work. I have even copied the html right from the Bootstrap site and I can't get it to work in any browser nor in dreamweaver. I have been searching for a solution for two days now and cannot find one anywhere.
<!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>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/navbar-fixed-top.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="/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">
<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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- 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="/js/jquery.min.js"><\/script>')</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>
</body>
</html>
It looks like you used container instead of container-fluid
The W3 documentation should work.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_fixed&stacked=v
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<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">
<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>
<body style="height:1500px">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-4">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
</div>
</div>
<h1>Scroll this page to see the effect</h1>
</body>
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.
This is my coding of navbar. When I switch to mobile view navbar works fine, but when I add some php content like include some pages by using using include function of php, then its stop working collapsing.
enter code here <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!--<!-- Nav bar fixed to top-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<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">
<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="#head">Mohit Sharma</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">
<li><img src="images/newlogo.png" /></li>
<li class="active">Training <span class="sr-only">(current)</span></li>
<li>Skills</li>
<li>Projects</li>
<li>Hobbies</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="images/newlogo.png" /></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- /.navbar -->
</body>
</html>
I am having trouble getting my dropdown's to work. I can get the navbar to show up perfectly, but when I click on "Dropdown" (either of them) it does not display the dropdown menu. I have tried looking on other posts about this, but nothing that fixed everyone's problems helped.
Here is the code
<head>
<meta charset="UTF-8">
<title>Landing Page</title>
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script type="javascript" src="dist/js/bootstrap.js"></script>
<script type="javascript">
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
</script>
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="navbar-wrapper"><!-- navbar start -->
<div class="container">
<nav class="navbar navbar-inverse navbar-static-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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home </li>
<li>About </li>
<li>Contact </li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div><!-- navbar end -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
In my case, I loaded bootstrap JS twice. Removed duplicate one and it worked.
The problem is in your stylesheet or bootstrap js Link (look at below). Check again!
<script type="javascript" src="dist/js/bootstrap.js"></script>
<link href="dist/css/bootstrap.css" rel="stylesheet">
I get this to work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing Page</title>
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
<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="#">Project name</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">
<li class="active">Home </li>
<li>About </li>
<li>Contact </li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
I used the code from http://getbootstrap.com/components/#navbar.
And i get an Error with your jquery version so i used also the link from getbootstrap.com
http://getbootstrap.com/getting-started/#template
I tried openning you code with jsFiddle and it worked perfectly.
maybe there is a problem with one of your bootstrap files..?
Try downloading another bootstrap js file
Here is the working example - https://jsfiddle.net/ckcrogo6/ (The HTML code is exactly the same as the code you posted)
Used the bootstrap files found here - https://www.bootstrapcdn.com/
<body>
<div class="navbar-wrapper"><!-- navbar start -->
<div class="container">
<nav class="navbar navbar-inverse navbar-static-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="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home </li>
<li>About </li>
<li>Contact </li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
Hope this will help