I am trying to get my navbar to auto collapse on click. Specifically when it is on a mobile device. I do not see why the below code will not work but I believe I maybe have the '.nav navbar-toggle a' wrong.
HTML
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
<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="#"></a>
</div>
<div class="collapse navbar-collapse" id="close">
<ul class="nav navbar-nav">
<li class="navtext">ABOUT</li>
<li class="navtext">SERVICES</li>
<li class="navtext">WORK</li>
<li class="navtext">CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Java script (I added this code to the end of bootstrap.js)
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav.navbar-nav a').on('click', function(){
$("#close").click();
});
}
else {
$('.nav.navbar-nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The website is speak-design.com
Thank to Hide Twitter Bootstrap navbar on click
I commented first:
('.nav navbar-nav a') should be ('.nav.navbar-nav a') see:
CSS rule to apply only if element has BOTH classes and you should apply your click
for closing on .navbar-collapse if i understand your question well
When i test the above i think i should work with the code shown below.
<script>
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav.navbar-nav a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.nav.navbar-nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
</script>
NB i think .collapse('hide'); make more sense (more readable) than doing click although the effect will be the same maybe.
Its already doing it. Make sure you added the viewport in your metatags
<meta name="viewport" content="initial-scale=1">
Reference
Related
I am using pretty Common setup of twitter Bootstrap 3 navbar-header.
SETUP:
navbar-header has 2 navbars
one navbar is floating left with lots of buttons (extending height of navbar-header)
2nd navbar is floating right
REQUIREMENT:
I want to have fixed height of navbar-header and since i am using lots of buttons on floating left menu , navbar-header expands in height
I want to hide extra buttons on floating left navbar that will cause navbar-header to expand in height
this should work on $(window).resize(function() {});
In simple words, when window is resized , extra buttons should hide and shown based on available size so that navbar-header does not expand in height.
Currently I am having trouble with floating right menu.
JSFIDDLE: https://jsfiddle.net/bababalcksheep/wsxa0zae/4/
Try resizing window
var adjustable = function() {
var collection = [];
$('.adjustable-drop').find('> li').removeClass('hide').each(function() {
if (this.offsetTop > 51) {
collection.push(this);
}
});
$(collection).addClass('hide');
};
$(window).resize(function() {
adjustable();
});
$(window).trigger('resize');
UPD. I've improved my solution. (The first version is here.)
I've used .outerWidth() and .width() methods instead of the .offsetTop.
I guess you can remove <div class="container-fluid"></div> from the Navbar because the Navbar is wrapped into <div class="container"></div>.
We need to show all elements of the Navbar when the width of the screen is 767px or less.
Please check the result: https://jsfiddle.net/glebkema/yt985oxf/
var selectNavbar = $('#navbar');
var selectNavbarHeader = $('.navbar-header');
var adjustable = function() {
if ( document.documentElement.clientWidth <= 767 ) {
$('.adjustable-drop .hide').removeClass('hide');
} else {
var collection = [];
var widthFree = selectNavbar.width() - selectNavbarHeader.outerWidth(true) - selectNavbar.find('.navbar-right').outerWidth(true);
$('.adjustable-drop').find('> li').removeClass('hide').each(function() {
if ( widthFree >= $(this).outerWidth(true) ) {
widthFree -= $(this).outerWidth(true);
} else {
collection.push(this);
}
});
$(collection).addClass('hide');
}
};
$(window).resize(function() {
adjustable();
});
$(window).trigger('resize');
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<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" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav adjustable-drop">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Additional-1</li>
<li>Additional-2</li>
<li>Additional-3</li>
<li>Additional-4</li>
<li>Additional-5</li>
<li>Additional-6</li>
<li>Additional-7</li>
<li>Additional-8</li>
<li>Additional-9</li>
<li>Additional-10</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I am having a problem getting the active class to change when next page is clicked. I have tried numerous different variations of scripts that I found on here, but haven't had any luck getting any to work. My project is located here: http://criminallawyerhuntsville.com/proof/.
<script>
$('.navbar-right li').click(function(e) {
$('.navbar-right li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
</script>
</head>
<body>
<div id="wrapper">
<header id="header" style="backface-visibility: hidden; transition: -webkit-transform 0.25s ease-in-out;">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/robertsonlogo.png" height="50px"></a>
</div>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Domestic Violence</li>
<li>Drug Crime</li>
</ul>
</div>
</div>
</nav>
</header>
Your using jQuery with no $(document).ready() ? change your code to the following for it to even trigger then check the console for errors if any.
<script>
$(document).ready(function(){
$('.navbar-right li').click(function(e) {
$('.navbar-right li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
});
</script>
If you use prevent default you want to prevent the anchor tag to work, so the click have to be on it
This example is if your active class is on the li and not the anchor:
$('.navbar-right li a').click(function(e) {
$('.navbar-right li.active').removeClass('active');
if (!$(this).parent().hasClass('active')) {
$(this).parent().addClass('active');
}
e.preventDefault();
});
as tried here: https://jsfiddle.net/xhgwjxku/
I am brand new to bootstrap and I have come to a problem.
I want to be able to redirect the user from the navbar to either sign in or log in to the website. However, when I have following html, the browser recognize the correct url redirect. but when you click on it, no action happens. If I put the statement outside of the navbar, it redirect fine. Am I missing some setting for navbar? Thanks for any help you can give.
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT</li>
<li>CONTACT</li>
<li>SIGN UP</li>
<li>LOG IN</li>
</ul>
</div>
</div>
</nav>
I also have this script for the navbar. Not sure if this makes any difference.
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
I'm using the Bootstrap Navbar on a one-page website and each anchor is linked to a section on the page. I'm using a very simple javascript to smooth scroll to each section, however this somehow conflicts the collapse function of the navbar - when I click on a link it doesn't collapse anymore which is annoying. I first thought it might be a HTML problem (solved here: Bootstrap Navbar Collapse not closing on Click ) but figured out it is a JS problem - any ideas?
HTML:
<nav class="navbar navbar-default mainbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle hvr-bounce-to-bottom collapsed" data-toggle="collapse" data-target="#my-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="collapse navbar-collapse" id="my-navbar-collapse">
<ul class="nav navbar-nav">
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link1" class="navelement">Link 1</a></li>
<li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link2" class="navelement">Link 2</a></li>
</ul>
</div>
</nav>
JAVASCRIPT:
var corp = $("html, body");
$(".navelement").click(function() {
var flag = $.attr(this, "href");
corp.animate({
scrollTop: $(schild).offset().top - 60
}, 1600, function() {
window.location.hash = flag;
});
return false;
});
you can use jQuery :not selector-utility
e.g.
$('a[href*=#]:not([href=#], [data-toggle=collapse])').click(function(){...})
or in your example:
var corp = $("html, body");
$(".navelement:not([data-toggle=collapse])").click(function() {
var flag = $.attr(this, "href");
corp.animate({
scrollTop: $(schild).offset().top - 60
}, 1600, function() {
window.location.hash = flag;
});
return false;
});
I'm having a problem regarding dropdown menus not working on mobile devices that i've been struggling with for a week. I've taken a copy of the current example from the bootstrap site, modified it a bit and during the test i noticed it didn't work as expected. (same goes for the original example(http://twitter.github.io/bootstrap/examples/carousel.html), where i only add a link to for instance google) - why this behaviour?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Dropdown test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
Links<span class="caret"></span>
<ul class="dropdown-menu">
<li>Google (opens in new window)</li>
<li>Bing (opens in new window)</li>
<li><a class="linkcheck" href="http://www.google.com">Google</a></li>
<li><a class="linkcheck" href="http://www.bing.com">Bing</a></li>
</ul>
</li><!-- .dropdown -->
</ul><!-- .nav -->
</div><!-- .nav-collapse -->
</div><!-- .container -->
</div><!-- .navbar-inner -->
</div><!-- .navbar -->
Bootstrap is new to me, and i can't find any documentation on nav-collapse, where can i find this?
And do i really have to do a click event, then window.open(url)? (or does onclick behave different on a mobile device?)
Here's my online example: http://test-web.dk/sandbox/bootstrap/
Edit:
Found a solution:
$('.linkcheck', this).click(function(){
var url = $(this).attr('href');
alert("link clicked:" + url);
if(url.match(/^http:/)) {
window.location.href = url;
}
});
// fix by RobDodson: github.com/twitter/bootstrap/issues/4550
// Kills regular links in browsers though, but they will be redirected by linkcheck above
$('.dropdown a').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
});
Still, a real bootstrap solution would be nice to known, rather than a hack :-) So if anybody has a suggestion, please post it.
Check that you are using the most up to date jQuery.
I was having the same problem with the Bootstrap theme for Drupal, but solved this problem by changing the settings in jQuery Update to the most up to date!