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.
Related
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>
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>
I have tried multiple solutions surrounding this issue which I have found on stack but I still can't seem to solve my particular issue. this is what I am working on http://dev.joneslewis.co.uk/. As you can see, in mobile view the hamburger menu doesn't collapse once opened whether I click on li element or the menu itself. As the site is based on anchors it's a real pain...
Here is the html I am currently working with and the Js...
<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" 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" rel="home" href="#">
<img class="img-responsive" style="max-width:35px; margin-top: -7px;"
src="#"/>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about">About</a></li>
<li><a a data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
Javascript...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://joneslewis.co.uk/bootstrap/jquery.js"></script>
<script src="http://joneslewis.co.uk/bootstrap/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
$(".navbar-collapse collapse").collapse('hide');
});
});
</script>
It appears the selector is incorrect. I tried this and I was able to select the component and hide the menu.
$(".navbar-collapse.collapse").collapse('hide')
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>
This should be pretty simple. I am trying to change bootstraps theme from default to a dark theme with the following code and javascript:
<link rel="stylesheet" href="/static/bootstrap.min.css">
<script src="/static/jquery.min.js"></script>
<script src="/static/bootstrap.min.js"></script>
<!-- Dynamic theme updates -->
<script>
var themes = {
"default": "",
"inverse" : "/static/darktheme.css"
}
function changeTheme(themeType) {
var themeurl = themes[themeType];
document.getElementById("mynavbar").className = "navbar navbar-" + themeType + " navbar-fixed-top";
var themeRef = document.getElementById("theme-ref")
themeRef.setAttribute("href", themeurl)
};
</script>
<link id="theme-ref" rel="stylesheet" href="">
And here is my navbar with the button to change it:
<div id="mynavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img style="max-width: 70px;" src="static/me-logo.png">
C&T Tool
</a>
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
an item here
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><another item</li>
<li class="dropdown">
Theme<b class="caret"></b>
<ul class="dropdown-menu">
<li>Light</li>
<li>Dark</li>
</ul>
</li>
{% block navsubmit %}
{% endblock %}
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
It works but I have to click it twice to get it to work fully. The first click on inverse changes the font and some margins and the second click on inverse changes the colors and everything else. What could make this happen? I'm using this theme.