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')
Related
For some reason, my accordion pushes up my header when it is active. I am wondering the best way to go about fixing this, is it possible to add a class to the header when the accordion is active to move it's position down (margin-top)?
I am using the default bootstrap.js and jquery.js files. Here is my HTML:
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">
<img class="header-logo" style="" src="">SF</a>
</div>
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Retrospective
</li>
</ul>
</div>
These images are the header with the accordion active/normal.
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.
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>
I have responsive menu when I test my menu on mobile phone it will convent to it will show two button one for nav bar other one to toggle the side bar to remove classes hidden-xs and hidden-sm . my problem is btnToggleSidebar is not responding to click event can someone help me ?
html nav
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" style="color:#fff"></span>
<span class="icon-bar" style="color:#fff"></span>
<span class="icon-bar" style="color:#fff" ></span>
</button>
<button type="button" id="btnToggleSidebar" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="glyphicon glyphicon-cog" style="color:#fff"></i>
</button>
<a class="navbar-brand" id="goHome" href="/Home/MyEvents"><span class="logo logo-icon"></span></a>
<a class="navbar-brand" id="goHome" href="/Home/MyEvents">#ViewBag.Configname</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>
</ul>*#
<ul class="nav navbar-nav navbar-right">
<li><a id="username" href="./">#ViewBag.UsernameAndRole <span class="sr-only ">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
JavaScript
$(document).on('click', 'button #btnToggleSidebar.navbar-toggle', function () {
alert("defvs");
$("div").toggleClass("hidden-sm").toggleClass("hidden-xs");
});
Remove the space between button and #btnToggleSidebar.navbar-toggle
$(document).on('click', 'button#btnToggleSidebar.navbar-toggle', function () {
alert("defvs");
$("div").toggleClass("hidden-sm").toggleClass("hidden-xs");
});
Not sure what you selector is targeting, but changing it to:
$(document).on('click', '#btnToggleSidebar', function () {
alert("defvs");
$("div").toggleClass("hidden-sm").toggleClass("hidden-xs");
});
Caused the alert to fire. Since #btnToggleSidebar and .navbar-toggle apply to the same element, you can simply target the ID and apply the click function to it.
Keep in mind you have other issues after this event fires: In mobile view the buttons on your navbar disappear completely.
Try this
$('.pull-left').on('click', function () {
alert("Hiding Nav");
$('.navbar-nav:first-child').toggleClass("hidden-sm");
});
$('.pull-right').on('click', function () {
alert("Hiding Sidebar");
$('.nav:last-child').toggleClass("hidden-xs");
});
I am simply trying to get the nav bar to toggle when I resize the screen. Right now it simply disapears. I am using bootstrap 3.3.1 and have maxcdn links from the documentation for both the javascript and css in my code. I've been over the documentation but I must be missing something. Below is my exact code. I have changed very little from the example given on the bootstrap website.
<nav class="navbar navbar-static" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
<div id="navbar" class="navbar-collapse collapse top">
<ul class="nav navbar-nav navbar-right">
<li ><a class="top-nav" href="./">About</a></li>
<li ><a class="top-nav" href="../navbar-static-top/">FAQ</a></li>
<li>
<div class="navbar-form">
<button class="btn btn-default navbar-join-waitlist" type="button" data-toggle="modal" data-target="#signinModal">
Get Early Access
</button>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
The navbar is there but all white so you can't see it.
Add the navbar-default class to the nav element in order to get bootstraps default style / theme:
<nav class="navbar navbar-default navbar-static" role="navigation">