So I'm trying to make a nice header at the top of my Django site that collapses whenever someone has a small window or they're on mobile. The nav menu collapses fine and looks great. However, whenever you click on the collapsed menu button (the hamburger icon), nothing happens when it should be expanding the menu. I've made sure that my actually points to the correct thing, being ".navbar-collapse". I've looked at other questions like this that show examples that work with the same things I have, so I'm not sure why it isn't working for me.
Here's where I setup my navbar:
<nav class="navbar navbar-default 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" 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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Any ideas?
Your code seems working fine, most probably the problem has to be with your jquery and/or bootstrap.js CDN's. Insert the correct CDN's.
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-default 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" 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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
For others who will get here from a web search:
I had this same problem - not being able to expand a navbar - but all of my code was fine.
My problem was that I had a network-level ad blocker that was blocking some of my CDN'ed scripts.
Facepalm.
#AVI's answer helped me reach this conclusion, check your CDN
Related
I appreciate all the help I can get :)
I'm trying to do a collapsable navbar with Bootstrap 3.3.7 with a hamburger icon on smaller viewports.
I can't get the hamburger icon to work. I've managed to make a hamburger icon which is visible only on smaller viewports but when I click the hamburger icon it doesn't show the menu items that it should contain.
How can I make the hamburger icon work?
Here is the code for the navigation bar:
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-inverse">
<div class="container"> <!-- Creates margins for the navbar content on left and right -->
<!-- Home icon -->
<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>
<span class="glyphicon glyphicon-home"></span>
</div>
<!-- Menu items -->
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Try this snippet... taken from w3schools... simple and cool.. dont forget to add bootstrap JS file
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
You need to include the bootstrap js cdn within your head tags and making sure you have the latest version of jQuery.
<head>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
Keep in mind, you need to load the jQuery before loading in Bootstrap.
Here is a working fiddle: https://jsfiddle.net/hkLfx6u8/16/
Why my button doesn't want to work when browser window collapsed? I mean once hamburger menu button is clicked no menu appears.
Here is my HTML:
<html>
<head>
</head>
<body>
<!-- Navbar style available in Bootstrap framework-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="http://codepen.io/ekilja01"><img id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
I guess everyone is fine until this point
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active" id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Can someone tell me why my links aren't lining up horizontally? I'm using bootstrap 3. I've referenced the bootstrap website and my code appears identical to their examples. I'm not using any custom CSS other than the bootstrap library so I am unsure how to remedy, any assistance gladly appreciated!
<!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>Test</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<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="#mainnav" 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>
<!-- the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="mainnav">
<ul class="nav navbar-nav">
<li><a href="#">Home</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<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>
You are missing closing anchor tags in your unordered list.
<li>Home</li>
<li>About</li>
<li>Contact</li>
Nav:
<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>
</div>
<!-- the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="mainnav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
JSFiddle
The navbar that I have managed to create is working just fine. However, when I collapse the navbar by re-sizing the window it disappears as I try to open the menu in that view.
Why is the drop-down menu disappearing in mobile view. What am I doing wrong?
HTML code:
<nav id="mainNav" class="navbar navbar-default 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 page-scroll" href="#page-top">Kirori Mal College</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 class="dropdown">
Why Recruit? <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Why Recruit?</li>
<li>Demographics</li>
<li>Faculty</li>
<li>Academics</li>
<li>Alumni</li>
</ul>
</li>
<!-- End of nav bar tabs -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Link to Website and
Link to CSS file.
This question already has answers here:
Hide Twitter Bootstrap nav collapse on click
(31 answers)
Closed 4 years ago.
I'm using bootstraps nav bar.When a user clicks on a nav-bar button, the nav bar stays open. How to collapse the nav bar when a nav-bar button is clicked?.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a data-toggle="tab" href="#sectionA">Page1</a></li>
<li><a data-toggle="tab" href="#sectionB">Page2</a></li>
<li><a data-toggle="tab" href="#sectionC">Page3</a></li>
</ul>
</div>
</div>
</nav>
Screenshot:
This is how it is after clicking on a nav-bar button (menu stays open):
This is how I want it to be after clicking on a nav-bar button (back to original state):
I have two solutions for this:
First option: data-toggle attribute
You can add the following attributes to the anchors data-toggle="collapse" data-target=".in"
This way, menu will collapse when a menu item is selected.
Here's your code:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!-- Add data-toggle="collapse" data-target=".in" to <a> elements-->
<!-- This way they will collapse the responsive menu when clicked -->
<li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a></li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2</a></li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionC">Page3</a></li>
</ul>
</div>
</div>
</nav>
Example: http://jsfiddle.net/Frondor/sey4wsah/
2nd alternative option: using jQuery (best method)
If the first example isn't working for you, you can just add a few lines of jQuery below jQuery and Bootstrap.js library calls, don't forget about the jquery.js and Bootstrap.js API:
<script src="/js/jquery.min.js"> <!--suppose these are the same paths you're using for it -->
<script src="/js/bootstrap.min.js">
And below:
<script>
$(document).ready(function () {
$("nav").find("li").on("click", "a", function () {
$('.navbar-collapse.in').collapse('hide');
});
});
</script>
This will match every link on your responsive menu, and collapse said menu at click event.
Give it a try
Keep your bootstrap.min.js file into js folder and add this <script src="js/bootstrap.min.js"></script> before </body> and keep your bootstrap.min.css into css folder and add this <link rel="stylesheet" href="css/bootstrap.min.css"> before </head> .