Twitter Bootstrap nav collapse Hide on click

Twitter Bootstrap nav collapse Hide on click - javascript

When I click on a menu item the menu does not close. I have already checked the imports of JS and CSS and seemingly everything is OK, is there something else I need to do to run the menu?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>

for me works...
$(document).ready(function(){
$('.navbar-collapse a').on('click', function(){
$('.navbar-toggle').click();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>

I'm not certain, but i think it may be dependant on jquery ui... some bootstrap features are. I can't help much further with current knowledge of the question...
I've been having a lot of trouble with imports too.. you can try checking on your browser debug console to be sure everything is being load, also.. on chrome: f12, tab sources.
I hope it has been helpful.

Try It, I think, it usefull.
<nav class="navbar navbar-static-top">
<div>
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_logistic" aria-expanded="false" aria-controls="navbar" id="button_menu_toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar line_orange"></span>
<span class="icon-bar line_orange"></span>
<span class="icon-bar line_orange"></span>
</button>
</div>
<div id="navbar_logistic" class="navbar-collapse collapse">
<ul class="nav navbar-nav flot_none">
<li class="active">Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
</div>
</div>
</nav>

check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>

Related

How to create Multiple Dropdowns into the same dropdown.

I've been trying to replicate the icons part in the navigation bar on this website https://www.vannuysmaserati.com/
This is what I have so far. I'm not using icons yet. I would like the dropdowns to use one dropdown menu not have one for each.
https://codepen.io/dmads2355/pen/bQPgbJ
<br>
<br>
<div class="container example2">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
P <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<p>phone</p>
</ul>
</li>
<li class="dropdown">
H <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<p>Hours</p>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
Thanks

Bootstrap Nav Bar not closing on mobile

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>

Bootstrap navbar not expanding

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.

Bootstrap Menu Collapse Disappear

Hello all,
I am trying to make a navbar disappear after being clicked (It also has a sub menu dropdown). I tried using this (in fact it worked for a while but now does not). Any help would be appreciated, David
<script type="text/javascript">
<!--Make the menu collapse on option click in mobile mode-->
jQuery(document).ready(function () {
jQuery(".nav .dropdownmenu, .navbar-header .dropdownmenu").click(function(event) {
// check if window is small enough so dropdown is created
jQuery(".navbar-collapse").removeClass("in").addClass("collapse");
});
});
</script>
This is the dropdown menu
<!-- 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>
<img src = "images/logo.png" height="30px" style="margin-top: 10px; margin-left: 5px;">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdownmenu active">Home</li>
<li class="dropdownmenu">Sales</li>
<li class="dropdownmenu">Lettings</li>
<li class="dropdownmenu">Financial Services</li>
<li class="dropdown">
Branches <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdownmenu" data-toggle="modal" data-target="#northwichModal"><a >Northwich</a></li>
<li class="dropdownmenu" data-toggle="modal" data-target="#middlewichModal">Middlewich</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#winsfordModal">Winsford</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#lettingsModal">Northwich Lettings</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

How to stick notification icon with menu toggle on small screens and right on large screens?

I'm trying to stick notification submenu to toggle menu in small screens and stick to right on small screens like the following
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed pull-left">
<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">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
</div>
</div>
<ul class="nav">
<li class="dropdown dropdown-list">
<a href="javascript:;" data-toggle="dropdown" dropdown-animate="" aria-haspopup="true" class="dropdown-toggle">
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</li>
</ul>
</nav>
But unfortunately it does not work. Please help me how could I do it?

To keep the notification always visible, you could add them to the nav-header like this:
<div class="navbar-header">
<button class="navbar-toggle collapsed">...</button>
<div class="nav navbar-brand pull-right">
<a href="#" >
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</div>
</div>
.notifications.navbar-brand {
font-size: 14px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
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>
<div class="nav navbar-brand pull-right notifications">
<a href="#" >
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>

Develop Reference

JavaScript is the programming language of the Web.

Twitter Bootstrap nav collapse Hide on click - javascript

Related

How to create Multiple Dropdowns into the same dropdown.

Bootstrap Nav Bar not closing on mobile

Bootstrap navbar not expanding

Bootstrap Menu Collapse Disappear

How to stick notification icon with menu toggle on small screens and right on large screens?

Categories

Resources