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");
});
Related
I have this left side bar and all i want is that side nav to close when clicked outside of it.
My side nav javascript code
//side-nav is the class of my side nav
//leftmenutrigger is my button on nav bar the toggles the side nav
Any suggestions will do. Even javascript or css just to hide my side nav bar.
My navigation bar and left side nav bar codes
$( document ).ready(function() {
$('.leftmenutrigger').on('click', function(e) {
$('.side-nav').toggleClass("open");
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar header-top sticky-top navbar-expand-lg navbar-light bg-light" >
<span class="navbar-toggler-icon leftmenutrigger"></span> <!--THIS IS THE BUTTON THAT TOGGLES-->
<a class="navbar-brand" href="#">
<img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;">
</a>
<a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" ></span> </button>
<div class="collapse navbar-collapse" id="navbarText" name="navbarText" > //SIDE NAV BAR ITEMS
<ul class="navbar-nav animate side-nav ">
<li class="nav-item">
<a href="" id="addUser" name="addUser" style="width: 100%">
<i class="fa fa-plus-circle"></i> Add User
</a>
<a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self">
<i class="fa fa-table"></i> Manage Prizes
</a>
</li>
</ul>
</div>
</nav>
THANKS!!!!
Use onclick window and remove class show if exist..
Also use onclick the nav to prevent collapse
$(window).click(function(e) {
if($(".navbar-collapse").hasClass("show")){
$('.navbar-collapse').removeClass("show");
e.preventDefault();
}
});
$('.navbar-collapse').click(function(event){
event.stopPropagation();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar header-top sticky-top navbar-expand-lg navbar-light bg-light" >
<span class="navbar-toggler-icon leftmenutrigger"></span> <!--THIS IS THE BUTTON THAT TOGGLES-->
<a class="navbar-brand" href="#">
<img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;">
</a>
<a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" ></span> </button>
<div class="collapse navbar-collapse" id="navbarText" name="navbarText" > //SIDE NAV BAR ITEMS
<ul class="navbar-nav animate side-nav ">
<li class="nav-item">
<a href="" id="addUser" name="addUser" style="width: 100%">
<i class="fa fa-plus-circle"></i> Add User
</a>
<a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self">
<i class="fa fa-table"></i> Manage Prizes
</a>
</li>
</ul>
</div>
</nav>
Here is the example from Bootstrap 3:
<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="#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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
And the JS code that works for me:
Anywhere outside .navbar-collapse :
$("body").click(function (event) {
var target = $(event.target);
var navbarCollapse = $(".navbar-collapse");
var navbarCollapseOpened = navbarCollapse.hasClass("in");
if (navbarCollapseOpened && !target.hasClass("navbar-toggle")) {
navbarCollapse.collapse("hide");
}
});
Anywhere outside .navbar:
$("body").click(function (event) {
var navigation = $(event.target).parents(".navbar").length;
if(!navigation) {
$(".navbar .navbar-collapse").collapse("hide");
}
});
document.addEventListener("click", function(event) {
// If user clicks inside the element
if (event.target.closest(".side-nav")){
$('.side-nav').removeClass("open");
};
});
It will handle clicking outside element in jQuery.
It use event bubbling. When user click in any element inside .side-nav event is going upper to the document and if somewhere we .side-nav as a ancestor of such element it means that click was made inside.
I have created a navbar with dropdown. Navigating works quite well. And the "active" class can be transferred without problems, but not to the "li" elements of the dropdown. All active "li" are underlined with border-bottom. If I navigate to "li" element "dropdown" it will be underlined, but not the selected "li" item in dropdown. What am I doing wrong?
Here is my index.html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<section class="layout">
<div class="branding">
<a href="/"><img src="images/header/app_fh_logo.png"
alt="App logo"></a>
</div><!--branding-->
</section><!--layout-->
</div><!--navbar-header-->
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li alt="standard"><a href="/"><span class="glyphicon glyphicon-
home"></span>Startseite</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-envelope"></span>Messenger<b class="caret">
</b></a>
<ul class="dropdown-menu">
<li><a href="/profile"><span class="glyphicon glyphicon-
user"></span>Konto</a></li>
<li><a href="/about"><span class="glyphicon glyphicon-
info-sign"></span>Über</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-
out"></span>Abmelden</a></li>
</ul>
</li>
</ul>
</div><!-- navbar collapse -->
</nav>
here is js
$(".nav a").filter(function () {
return this.href == location.href
}).parent().addClass("active").siblings().removeClass("active");
$("li").click(function () {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
Thanks in advance.
$("li").click(function () {
$("li").each(function(index, ele) {
$(ele).removeClass("active");
});
$(this).addClass("active");
});
use jquery each function inside li click function to remove all active classes
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>
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">