Show and hide Bootstrap Navbar's buttons based on screen width - javascript

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>

Related

How to replace image in Bootstrap navbar-brand on scroll with jQuery?

Basically my problem is that I'd like to change the navbar-brand image file in my Bootstrap navigation to a different one once you start scrolling through the website.
The navigation bar is transparent when the website is sitting at the top of the page, but once you start to scroll, the navigation background becomes white. I'd like for the image on the navbar-brand to also change to a different colored one that I have so it remains visible once the navigation background changes.
Anybody got some ideas? Here's the HTML and current jQuery markup I have.
<div class="container">
<!-- Navbar Header -->
<div class="navbar-header">
<!-- Collapse Toggle -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /.collape-toggle -->
<!-- Navbar Brand -->
<img src="img/blockins-logo.png" alt="Logo" draggable="false">
<!-- /.navbar-brand -->
</div>
<!-- /.navbar-header -->
<!-- Navbar Menu -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<!-- Menu -->
<ul class="nav navbar-nav justified">
<li role="presentation">Welcome</li>
<li role="presentation">Our Story</li>
<li role="presentation">Services</li>
<li role="presentation">Programs</li>
<li role="presentation">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="presentation">
<form class="navbar-form">
<i class="fa fa-plus" aria-hidden="true"></i>Career Opportunities
</form>
</li>
</ul>
<!-- /.menu -->
</div>
<!-- /.navbar-menu -->
</div>
</nav>
$(document).ready(function() {
// Navigation color change
$(window).scroll(function() {
if ($(document).scrollTop() < 50) {
$('nav').addClass('transparent');
} else {
$('nav').removeClass('transparent').css('color: black');
$('')
}
});
});
You could just switch the img src like that:
$(document).ready(function() {
var image1 = 'img/blockins-logo.png';
var image2 = 'img/blockins-logo2.png';
$(window).scroll(function() {
if ($(document).scrollTop() < 50) {
$('nav').addClass('transparent');
$('.navbar-brand img').attr('src',image1);
} else {
$('nav').removeClass('transparent').css('color: black');
$('.navbar-brand img').attr('src',image2);
}
});
});
Note that you might feel it because the image will load only once you'll scroll down.
another option i can think of is to toggle two html '.navbar-brand' like that:
<!-- Navbar Brand -->
<img src="img/blockins-logo.png" alt="Logo">
<img src="img/blockins-logo2.png" alt="Logo">
<!-- /.navbar-brand -->
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() < 50) {
$('nav').addClass('transparent');
$('.image1').show();
$('.image2').hide();
} else {
$('nav').removeClass('transparent').css('color: black');
$('.image2').show();
$('.image1').hide();
}
});
});
</script>
you should be able to change img src with jquery.
$(document).ready(function() {
// Navigation color change
$(window).scroll(function() {
var nav_img = $('.navbar-brand img');
if ($(document).scrollTop() < 50) {
$('nav').addClass('transparent');
nav_img.attr("src","first.png");
} else {
$('nav').removeClass('transparent').css('color: black');
nav_img.attr("src","second.png");
}
});
});
Also please make sure your divs are properly nested. IN your current structure your nav tag is not mentioned at start but it is closed at end.
$(window).scroll(function() {
if ($(window).scrollTop() < 50) {
$('nav').addClass('transparent');
$('.brandLogo img').attr("src","img/blockins-logo.png");
} else {
$('nav').removeClass('transparent').css('color: black');
$('.brandLogo img').attr("src","img2");
}
});

Make the Bootstrap Navbar Sticky

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/

How to allow for redirect url in bootstrap navbar?

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;
});
});

Bootstrap Navbar not collapsing with Smooth Scroll Script

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;
});

How do I get my twitter bootstrap navbar to close on click?

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

Categories

Resources