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;
});
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>
<script>
$(document).ready(function(){
$('body').scrollspy({target: "#navbar", offset: 50});
$("#myNavbar a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top
}, 2150, function(){
});
});
});
</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="#myNavbar">
<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><h5><b>Home</b></h5></li>
<li><h5><b>other</b></h5></li>
<li><h5><b>other2</b></h5></li>
<li><h5><b>other3</b></h5></li>
</ul>
<div id="social_nav">
<ul class="nav navbar-nav navbar-right">
<li><span class="fa fa-pinterest-square fa-2x"></span></li>
<li><span class="fa fa-instagram fa-2x"></span></li>
<li><span class="fa fa-facebook-square fa-2x"></span></li>
</ul>
</div>
</div>
</div>
</nav>
Hi,
I have a bootstrap nav with scrollspy moving smoothly between sections on the page.
This uses event.preventDefault(); to stop the page jumping about and is fine. However i have a second part of the nav with social media icons that need to link to a webpage, and these are also stopped from working by event.preventDefault();
Is there a was of stopping event.preventDefault(); for the social media icons but leaving it for the other page nav items please.
Bit of web diy noob so maybe this is easy, but I'm foxed.
You can just exclude the social icons from the event handler
$("#myNavbar a").not('#social_nav a').on('click', function(event) {
event.preventDefault();
var hash = this.hash;
....
});
Should do it, there's no reason to scroll to those icons when clicked, as they redirect anyway.
The preventDefault is stopping the links from executing their default behavior, in this case going to the linked URL. It's a bit of a hacky solution, but you could add a class (social-link in the example) to any links in the navbar that need to go to a real URL, then restore that behavior in your JavaScript:
$(document).ready(function(){
$('body').scrollspy({target: "#navbar", offset: 50});
$("#myNavbar a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
if (this.hasClass('social-link')) {
window.location = this.href;
} else {
$('html, body').animate({scrollTop: $(hash).offset().top }, 2150, function(){ });
}
});
});
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 have a navbar at the site http://deliciousproductions.com.au and the href links in the navbar don't seem to work, the href stuff for #about works but not for actual links like home.
<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="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Delicious Productions</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>RECIPES</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
I feel like it should just be working but maybe this script is interfering because of the onclick?
$(document).ready(function(){
// Add smooth scrolling to all links in navbar
$(".navbar a").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
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1600, 'easeInOutCubic', function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
cheers, or the prevent default?
You are right the $(".navbar a") selector selects all your link, and prevents the default behaviour event.preventDefault();
Try adding a class scroll to the a anchor tag and modify your selector to $(".navbar a.scroll") selector.
<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="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Delicious Productions</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li><a class="scroll" href="#about">ABOUT</a></li>
<li>RECIPES</li>
<li><a class="scroll" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar
$(".navbar a.scroll").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
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1600, 'easeInOutCubic', function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
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