So I want to make a Navbar using Bootstrap then when you scroll down past 150 pixels the navbar has a background that is slightly transparent all the examples I have found for this on Stackoverflow haven't been what I need :/ I know how to add classes and so on with jQuery and when you scroll down pass a certain height but I want the Navbar to fadeOut and then fadeIn with a different class but I haven't found a way to do this.
I am grateful for any help :)
Thanks,
Ste
Answer:
jQuery
$(window).on( "scroll", function() {
$('nav').toggleClass('scrolled navbar-fixed-top', $(this).scrollTop() > 150);
});
CSS
nav.scrolled {
background: rgba(0,0,0,0.5);
}
nav {
transition: background-color 0.5s ease;
}
HTML
<nav id="secondNav" class="navbar navbar-default">
<div class="container-fluid">
<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" href="#">Responsive Slider</a>
</div>
<div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right navText">
<li>Home
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
</nav>
You can do the fading with just css transitions all you need to do is use jquery toggleClass function when the window reaches 150px.
Try the following:
$(window).on( "scroll", function() {
$('#secondNav').toggleClass('scrolled', $(this).scrollTop() > 150);
});
and the css
#secondNav.navbar-default{
background: #000;
transition: background-color 0.5s ease;
}
#secondNav.scrolled {
background: rgba(0,0,0,0.5);
}
The transition property is what will give you the fade in and out and then you can change the background of the navbar-default to whatever you want it to be. When it reaches 150px it will toggle the scrolled class and change the background.
I have a difficult solution. You can create two navbar. second nav should be hidden. when you scroll more than 150px, then it should be fade in with fixed position. Below my jQuery code is
$(window).scroll(function(){
var scrolled = $(window).scrollTop();
if(scrolled>149){
$('#second_nav').fadeIn();
}
else{
$('#second_nav').fadeOut();
}
});
Below the code is first nav.
<nav class="navbar navbar-default">
And below the code is second nav.
<nav class="navbar navbar-default navbar-fixed-top" id="second_nav">
Check my live demo on jsfiddle
Are you using jQuery? if so, maybe something like this?
$('#div').click(() => {
$('#div').fadeOut();
$('#div')
.css('background-color', 'green')
.fadeIn();
});
https://jsfiddle.net/53n2o76g/
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 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;
});
});
})
As it stands, clicking on "Link" twice redirects you to a page, but whenever you click on and around it such that the menu drops down or goes up, the CSS code
a:active span {
color:#bdbcae;
}
is put into effect. What I am trying to do is make it so that the link only changes color when you click it the second time, resulting in you being redirected to the page. If you click it only once so that only the menu drops down, I want the link to remain its default color.
This is the code in my function below that I was looking at to accomplish this
if ($(this).data('clicks')==2){
$(this).data('clicks', 0);
window.open("accomplishments.html");
}
I was thinking of adding something along the lines of $(this).addClass("active") within this if statement but that doesn't work - and then making it do $(this).removeClass("active") whenever this isn't the case, but none of this works. See my full code below.
Here's my Bootply.
HTML:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span>Link</span><b class="caret"></b>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul><!-- END: "dropdown-menu" -->
</li><!-- END: "dropdown" -->
</ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
</div><!-- END: "container" -->
</div><!-- END: "container" -->
</div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->
CSS:
a span {
color:#ffffff;
}
a:hover *.caret {
color:#bdbcae;
}
a:active span {
color:#bdbcae;
}
a:active *.caret {
color:#bdbcae;
}
jQuery:
$(document).on("click", "span", function() {
if(typeof $(this).data('clicks') == 'undefined') {
$(this).data('clicks', 1);
}else {
$(this).data('clicks', $(this).data('clicks')+1);
}
if ($(this).data('clicks')==2){
$(this).data('clicks', 0);
window.open("page.html");
}
});
$(document).click(function(event) {
if(!$(event.target).closest("span").length) {
$("span").data('clicks', 0);
}
});
I think using a "click" and a "dblclick" event will help you, why do you want to set a particular color if you're going to redirect user ?
Jquery Double click event : http://api.jquery.com/dblclick/
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